{% assign distro = site.data[include.distro] %}
<link rel="stylesheet" href="/assets/css/software.css">
<script defer src="/assets/js/app.js"></script>
<header class="jumbotron jumbotron-fluid bg-{{ distro.bg-color }} text-center pb-0">
  <div class="container text-{{ distro.fg-color }}">
    {% capture testing_version %}{% include leap_testing_release %}{% endcapture %}
    {% assign testing_version = testing_version | normalize_whitespace %}
    {% if testing_version != "" and include.type == "current" %}
      <div class="alert alert-info d-flex justify-content-between align-items-center">
      {% capture distro_name %}Leap {% include leap_testing_release %} <sup>{% include leap_testing_status %}</sup>{% endcapture %}
      <span>{{ locale.new_version_testing | replace: '$distro_name', distro_name }}</span>
      <a class="btn btn-info" href="{{ '/testing/' | prefix_locale }}">{{ locale.learn_more }}</a>
      </div>
    {% endif %}
    {% if include.type == "legacy" %}
      <div class="alert alert-danger d-flex justify-content-between align-items-center">
      {% capture distro_name %}Leap {% include leap_release %}{% endcapture %}
      <span>{{ locale.new_version_available | replace: '$distro_name', distro_name }}</span>
      <a class="btn btn-danger" href="{{ '/leap/' | prefix_locale }}">{{ locale.learn_more }}</a>
      </div>
    {% endif %}
    <div class="page-heading pb-5">
        <div class="m-auto distribution-logo">
        {% include {{ distro.logo }} %}
        </div>
      <h1 class="display-3">
        openSUSE {{ distro.name }}
        {% if distro.version %}{{ distro.version }}{% endif %}
        {% if include.state and include.state != "Stable" %}<sup>{{ include.state }}</sup>{% endif %}
      </h1>
    </div>
  </div>
  <div class="border-bottom" role="tablist">
    <ul class="container nav nav-tabs nav-justified border-0 p-0">
      <li class="nav-item">
        <a class="nav-link h-100 font-weight-bold active" data-toggle="tab" href="#overview" role="tab">
          {{ locale.overview }}
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link font-weight-bold h-100" data-toggle="tab" href="#download" role="tab">
          {{ locale.download }}
        </a>
      </li>
    </ul>
  </div>
</header>

<div class="tab-content">
  <div class="tab-pane active" id="overview" role="tabpanel">

    {% include overview/{{ distro.name }}.html %}
    {% if distro.name == "Leap" %}
      {% include overview/{{ include.distro }}.html %}
    {% endif %}
    <section class="py-3">
      <div class="container">
        <div class="row">
          {% capture distro_hash %}{{ distro.name }}_features{% endcapture %}
          {% for hash in locale[distro_hash] %}
          {% assign feature = hash[1] %}
          {% capture icon %}icons/{{ hash[0] }}.svg{% endcapture %}
          {{ feature.rundown }}
          <div class="col-md-6 py-3 mb-auto">
            <h2 class="d-flex align-items-center">
              {% include {{ icon }} %}
              <span class="ml-1">{{ feature.name }}</span>
            </h2>
            <p class="lead font-weight-normal">
              {{ feature.rundown }}
            </p>
            {{ feature.description | markdownify }}
            {% for link in feature.links %}
            <a class="btn btn-{{ link.color }} mb-2" href="{{ link.link }}">
              {% include icons/{{ link.icon }}.svg %}
              <span class="hidden-xs-down" lang="en">{{ link.name }}</span>
            </a>
            {% endfor %}
          </div>
          {% endfor %}
        </div>
      </div>
    </section>
  </div>
  <div class="tab-pane" id="download" role="tabpanel">
    <section class="py-3">
      <div class="container" role="main">
        {% capture chrome_warning_link %}<a href="https://blog.chromium.org/2020/02/protecting-users-from-insecure.html" target="_blank">{{ locale.chrome_warning_policy }}</a>{% endcapture %}
        {% capture chrome_warning_bug %}<a href="https://github.com/openSUSE/mirrorbrain/issues/3" target="_blank">openSUSE/mirrorbrain#3</a>{% endcapture %}
        <p class="alert alert-danger">{{ locale.chrome_warning | replace: '$change_in_policy', chrome_warning_link | replace: '$bug', chrome_warning_bug }}</p>
        {% assign default = distro.downloads | where_exp: "item", "item.display" %}
        {% for tab in default %}
          <div {% if tab.display == 'all' %}{% elsif tab.display %}class="only-{{ tab.display }}" style="display: none"{% endif %}>
            {% if forloop.first == false %}<h1 class="display-4">{{ locale[tab.name] }}</h1>{% endif %}
            <div class="row">
              {% for arch in tab.arches %}
                <div class="col-md-6 mb-3">
                  <h5>{{ locale[arch.name] }}</h5>
                  <div class="list-group">
                    {% include types.html types=arch.types %}
                  </div>
                </div>
              {% endfor %}
            </div>
          </div>
        {% endfor %}
        {% if distro.downloads.size > 1 %}
          {% capture alternative_downloads %}<a href="#" data-toggle="modal" data-target="#downloadModal">{{ locale.alternative_downloads }}</a>{% endcapture %}
          {% capture options %}<b>{% for tab in distro.downloads offset: 1 %}<span {% if tab.display %}class="not-{{ tab.display }}"{% endif %}>{{ locale[tab.name] }}{% if forloop.last == false %}, {% endif %}</span>{% endfor %}</b>{% endcapture %}
          <div class="lead">{{ locale.alternative_downloads_desc | replace: '$alternative_downloads', alternative_downloads | replace: '$options', options }}</div>
        {% endif %}
      </div>
    </section>
    {% include download/{{ distro.name }}.html %}
    {% if distro.name == "Leap" %}
      {% include download/{{ include.distro }}.html %}
    {% endif %}

    <section class="py-3">
      <div class="container" role="main">
        {% include verify_download.html %}
      </div>
    </section>
  </div>
</div>
{% if distro.downloads.size > 1 %}
{% include download-modal.html %}
{% endif %}