{% extends 'landing_page/common/base.html' %}

{% block scripts %}
  <style type="text/css">
    a.wide_cta {
      border: none;
      display: block;
      width: 212px;
      border-radius: 3px;
      font-size: 1.2em;
      height: auto;
      line-height: 1.2em;
      background-color: #00b0ff;
      box-shadow: 0 3px 0px #009ee5;
      transition: all 0.2s ease;
      padding: 0.5em 1.5em;
      color: white;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-family: 'PT Sans Narrow', 'Arial narrow', arial, sans-serif;
      text-align: center;
      margin-bottom: 10px;
    }

    a.wide_cta:hover {
      background: #43c5ff;
      box-shadow: 0px 3px 0px #2b9ed1;
      cursor: pointer;
      color: white;
    }

    a.wide_cta_out {
      display: block;
      border: 3px solid #00b0ff;
      color: #00b0ff;
      box-shadow: none;
      padding: 0.41em 1.5em;
      width: 212px;
      border-radius: 3px;
      font-size: 1.2em;
      height: auto;
      line-height: 1.2em;
      transition: all 0.2s ease;
      padding: 0.5em 1.5em;
      font-family: 'PT Sans Narrow', 'Arial narrow', arial, sans-serif;
      text-align: center;
      margin: 10px auto;
      background: white;
    }

    a.wide_cta_out:hover {
      color:#43c5ff;
      border: 3px solid #43c5ff;
    }

    div.ddbox {
      background: #f2f6f9;
      padding: 15px 15px 0 15px;
      margin: 0 -15px;
      border-radius: 0 0 10px 10px;
    }

    div.ddbox a.wide_cta {
      margin: 10px auto
    }

    div.pluginname a.wide_cta {
      margin-bottom: 0;
      width: 190px;
    }

    div.pluginbox {
      background: #FCFDFD;
      margin-top: 25px;
      margin-bottom: 15px;
      border-radius: 10px;
    }

    span.plugintype {
      background: #CBD7E5;
      color: white;
      text-transform: uppercase;
      padding: 0 8px;
      border-radius: 3px;
      letter-spacing: 2px;
      line-height: 27px;
      display: inline-block;
      margin: 0;
      font-size: 15px;
      position: relative;
      top: -3px;

    }

    div.pluginname {
      background: #f2f6f9;
      padding: 15px;
      margin: 0 -15px 15px -15px;
      clear: both;
      border-radius: 10px 10px 0 0;
    }

    div.pluginname h3 {
      margin: 0;
      line-height: 37px;
    }

    div.ddbox p {
      font-family: 'PT Sans Caption', arial, sans-serif;
      color: black;
      font-size: 13px;
      text-align: center;
    }

    div.ddbox p span {
      color: #8FA2B6;
    }

    p.aiinstructions a {
      font-size: 1.2em;
    }
    p.achecksum {
      text-align:center;
    }
    p.achecksum a {
      font-size: 13px;
      font-style: italic;
    }

    section h2 {
      text-align: left;
      border-right: none;
    }

    @media (min-width: 1199px) {
      div.pluginname a.wide_cta {
        float: right;
      }
    }

    @media (min-width: 992px) and (max-width: 1199px)  {
      div.pluginname a.wide_cta {
        float: right;
      }
    }

    @media (min-width: 768px) and (max-width: 992px) {
      div.pluginname a.wide_cta {
        float: right;
      }
    }

    @media (min-width: 0px) and (max-width: 767px) {
      div.pluginname a.wide_cta {
        float: center;
        margin: 15px auto;
      }

      p.aiinstructions {
        text-align: center;
      }

      p.pluginfo {
        text-align: center;
      }

      div.pluginname {
        text-align:center;
      }
    }
  </style>
{% endblock %}

{% block content %}
<section>
  <div id="absolute">
    <div class="container softcontent">
      <div class="row">
        <div class="col-md-12 col-xs-12 col-sm-12">
          <div id="page_content">
            <h1>Download Fuel for OpenStack Plugins</h1>
            <p>The following Fuel plugins are currently available for download:</p>
            <hr />


            {% for group in groups %}
              <h2>{{ group.name|title }}</h2>
              {% for plugin in group.plugins.all %}
                <div class="row" name="{{ plugin.name }}" id="{{ plugin.name }}">
                  <div class="col-md-9 col-sm-12 pluginbox">
                    <div class="pluginname">
                      <div class="row">
                        <div class="col-md-7 col-sm-7 col-xs-7">
                          <h3>{{ plugin.title }}</h3>
                        </div>
                        <div class="col-md-5 col-sm-5 col-xs-5">
                          <a href="{{ plugin.binarylink }}" class="wide_cta">Download Now</a>
                        </div>
                      </div>
                    </div>
                    <p class="pluginfo">{{ plugin.description }}</p>
                    <div class="row">
                      <div class="col-md-9">
                        <p class="aiinstructions"><a href="{{ plugin.doclink }}">Installation Instructions</a></p>
                      </div>
                      <div class="col-md-3">
                        <p class="achecksum"><a href="{{ plugin.binarylink }}.sha.txt">checksum</a></p>
                      </div>
                    </div>
                    <div class="row ddbox">
                      <div class="col-md-4 col-sm-4"><p><span>Version</span> {{ plugin.version }}</p></div>
                      <div class="col-md-4 col-sm-4"><p><span>Compatibility</span> MOS: {{ plugin.compability.all|join:', ' }}</p></div>
                    </div>
                  </div>
                </div>
              {% endfor %}
            {% endfor %}

            <hr />
            <h2>How can I write my own-plugins?</h2>
            <p>Interested in writing and testing your own plugin?</p>
            <p>Please visit our <a href="http://docs.fuel-infra.org/openstack/fuel/fuel-6.0/plugin-dev.html#developing-a-plug-in-for-fuel">Plugins Development documentation</a> for more information.</p></div>
          </div>
        </section>
{% endblock %}