{% extends "templates/base.html" %}

{% block title %}{{ vendor }} {{ name }} certified with Ubuntu{% endblock %}

{% block meta_description %}
  Hardware that have been certified for use with Ubuntu.
{% endblock meta_description %}

{% block body_class %}
  is-paper
{% endblock body_class %}

{% block outer_content %}

  <section class="p-section--hero">
    <div class="row">
      <div class="col-9 col-medium-4 col-start-medium-3 col-start-large-4">
        <h1 class="p-muted-heading">
          <a href="/certified/{{ category_pathname }}">{{ category_pathname }}</a> &rsaquo; <a href="/certified/platforms/{{ platform_id }}">{{ platform_name }}</a>
          {% if platform_name != name %}&rsaquo; {{ name }}{% endif %}
        </h1>
      </div>
    </div>
    <div class="row">
      <div class="col-3 col-medium-2 u-hide--small">
        <div class="p-section--shallow">
          {% with category=category %}
            {% include "certified/shared/category-image.html" %}
          {% endwith %}
        </div>
      </div>
      <div class="col-9 col-medium-4">
        <div class="p-section--shallow u-no-padding--bottom">
          <h1 class="u-no-margin--bottom">{{ vendor }} {{ name }}</h1>
          <h2>{{ form_factor|capitalize }} system certified with Ubuntu</h2>
        </div>
        {% if hardware_website %}
          <div class="p-cta-block">
            <a href="{{ hardware_website }}" class="p-button">Visit vendor website</a>
          </div>
        {% endif %}
      </div>
    </div>
  </section>
  <div class="u-fixed-width">
    {% if release_details["releases"]|length > 1 %}
      <div class="row model-details-row" style="margin-bottom: 7px;">
        <div class="col-9 col-start-large-4">
          <nav class="p-tabs model-details-p-tabs" aria-label="Tabs example">
            <ul class="p-tabs__list model-details-p-tabs__list">
              {% for release in release_details["releases"]|sort(attribute='version')|reverse %}
                <li class="p-tabs__item">
                  <button class="p-tabs__link"
                          role="tab"
                          aria-selected="{{ 'true' if loop.first else 'false' }}"
                          aria-controls="tab{{ loop.index }}"
                          id="tab{{ loop.index }}-button"
                          tabindex="{{ '0' if loop.first else '-1' }}">{{ release.version }}</button>
                </li>
              {% endfor %}
            </ul>
          </nav>
        </div>
      </div>
    {% else %}
      <hr class="p-rule"/>
    {% endif %}

    <div class="row--25-75">
      <div class="col u-hide--small">
        {{ image(url="https://assets.ubuntu.com/v1/d9c2c5bf-ubuntu_certified.png",
                  alt="Ubuntu Hardware Certification",
                  width="112",
                  height="157",
                  hi_def=True,
                  loading="auto") | safe
        }}
      </div>
      <div class="col">
        {% for release in release_details["releases"]|sort(attribute='version')|reverse %}
          <div tabindex="0"
               role="tabpanel"
               id="tab{{ loop.index }}"
               aria-labelledby="tab{{ loop.index }}-button"
               {% if not loop.first %}hidden="hidden"{% endif %}>
            <p class="p-heading--2 u-no-padding--top">Ubuntu {{ release.version }}</p>
            {% if release.level == "Certified Pre-Install" %}
              <p>
                Pre-installed in some regions with a custom Ubuntu image that takes advantage of the system's hardware features and may include additional software. Standard images of Ubuntu may not work well, or at all.
              </p>
              {% if vendor == "Xilinx" %}
                <p style="padding-top:1.4rem;">
                  <a href="/download/amd" class="p-button">Download</a>
                </p>
              {% endif %}
            {% elif release.level == "Certified" %}
              <p>
                The {{ vendor }} {{ name }} with the components described below has been awarded the status of certified for Ubuntu.
              </p>
              <p>
                <a href="{{ release.download_url }}" class="p-button">Download</a>
              </p>
            {% endif %}

            {% for note in release.notes %}
              <p>
                {{ note.comment | replace('\n', '<br />') | safe }}
              </p>
            {% endfor %}

            <div class="p-section--shallow">
              <table aria-label="Software" style="margin-top:1.4rem">
                <tbody>
                  {% if release.kernel %}
                    <tr>
                      <th colspan="3" class="u-text--muted">Kernel</th>
                      <td colspan="6">{{ release.kernel }}</td>
                    </tr>
                  {% endif %}
                  {% if release.bios %}
                    <tr>
                      <th colspan="3" class="u-text--muted">BIOS</th>
                      <td colspan="6">{{ release.bios }}</td>
                    </tr>
                  {% endif %}
                </tbody>
              </table>
            </div>
            <div>
              <hr class="p-rule--muted" />
              <h3 class="p-muted-heading">Hardware</h3>
              <table aria-label="Hardware" class="u-no-margin--bottom">
                <tbody>
                  {% for hardware_subtitle, values in release["components"].items() %}
                    <tr>
                      <th colspan="3" class="u-text--muted">{{ hardware_subtitle }}</th>
                      <td colspan="6">
                        <ul class="p-list u-no-margin--bottom">
                          {% for value in values %}
                            <li class="p-list__item u-no-padding--top">
                              {{ value.name }}
                              {% if value.bus in ["usb", "pci"] %}
                                {{ value.bus }} ({{ value.identifier }}
                                {% if value.subsystem != '' %}{{ value.subsystem }}{% endif %}
                                )
                              {% endif %}
                            </li>
                          {% endfor %}
                        </ul>
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
              <hr class="p-rule--muted" />
              <p>
                <a href="/certified/{{ canonical_id }}/{{ release.version }}">All hardware details &rsaquo;</a>
              </p>
            </div>
            {% if platform_certified_configuration_count > 1 %}
              <div class="p-section--shallow">
                <hr class="p-rule--muted" />
                <p>
                  <a href="/certified/platforms/{{ platform_id }}">{{ platform_certified_configuration_count - 1 }} more certified
                    {% if platform_certified_configuration_count == 2 %}
                      configuration
                    {% else %}
                      configurations
                    {% endif %}
                  in the {{ platform_name }} platform &rsaquo;</a>
                </p>
              </div>
            {% endif %}
          </div>
        {% endfor %}
        <section class="p-section--deep">
          <hr class="p-rule--muted" />
          <div class="row">
            <div class="col-3">
              <h3 class="p-muted-heading">Issues? Let us know</h3>
            </div>
            <div class="col-6">
              <p>
                If there is an issue with the information for this system,
                <a target="_blank"
                   href="https://answers.launchpad.net/ubuntu-certification/+addquestion?field.title=Feedback on the {{ vendor }} {{ name }} ({{ canonical_id }})">please let us know</a>.
              </p>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>

  {% if components %}
    {% with components=components %}
      {% include "certified/model-details/_components-section.html" %}
    {% endwith %}
  {% endif %}

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const tabs = document.querySelectorAll('.p-tabs__link');
      const panels = document.querySelectorAll('[role="tabpanel"]');

      tabs.forEach(tab => {
        tab.addEventListener('click', function() {
          // Deselect all tabs
          tabs.forEach(t => {
            t.setAttribute('aria-selected', 'false');
            t.setAttribute('tabindex', '-1');
          });

          // Hide all tab panels
          panels.forEach(panel => {
            panel.setAttribute('hidden', 'hidden');
          });

          // Select the clicked tab
          this.setAttribute('aria-selected', 'true');
          this.setAttribute('tabindex', '0');

          // Show the corresponding tab panel
          const panel = document.getElementById(this.getAttribute('aria-controls'));
          panel.removeAttribute('hidden');
        });
      });
    });
  </script>

{% endblock %}