{% extends "appliance/_base-appliance.html" %}

{% block title %}Install {{ appliance_name }} | Ubuntu Appliance{% endblock %}

{% block meta_description %}{{ meta_description }}{% endblock %}

{% block meta_copydoc %}https://docs.google.com/document/d/1zgOl4GCK6O6Clv6oxp-DXDSKYIKO2pvpXaYXALiTlpo/{% endblock meta_copydoc %}

{% block content %}
<section class="p-strip is-shallow">
  <div class="row">
    <div class="col-6">
      <div class="p-media-object u-no-margin--bottom">
        <img src="{{ logo }}?w=90" alt="" class="p-media-object__image is-round" height="90" width="90">
        <div class="p-media-object__details">
          <h1 class="p-heading--3 u-no-margin--bottom">
            {{ appliance_name }}
          </h1>
          <p class="p-muted-heading">Ubuntu Appliance</p>
          <ul class="p-inline-list--middot u-no-margin--bottom">
            <li class="p-inline-list__item">By {{ company_name }}</li>
            <li class="p-inline-list__item">{{ category }}<br class="u-hide--medium"></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="row">
        {% if downloads.raspberrypi %}
        <div class="col-2">
          <a href="/appliance/{{ short_name }}/raspberry-pi">
            <h3 class="p-heading--5 u-no-padding--top">
              {% if pi.3 or pi.4 %}
              Raspberry Pi {% if pi.3 %}3{% endif %}{% if pi.3 and pi.4%} &amp; {% endif %}{% if pi.4 %}4{% endif %}
              {% else %}
              Raspberry Pi 3 &amp; 4 {{ pi.4 }}
              {% endif %}
            </h3>
            <hr>
            <div class="u-align--center">
              <img src="https://assets.ubuntu.com/v1/a999bb5f-Raspberry+Pi+4.png?h=100" alt="" style="width: 68px; height: 44px;">
            </div>
          </a>
        </div>
        {% endif %}
        {% if downloads.intelnuc %}
        <div class="col-2">
          <a href="/appliance/{{ short_name }}/intel-nuc">
            <h3 class="p-heading--5 u-no-padding--top">
              Intel NUC
            </h3>
            <hr>
            <div class="u-align--center">
              <img src="https://assets.ubuntu.com/v1/78b65554-1920px-Intel_NUC8.jpg?h=100" style="width: 68px; height: 45px;">
            </div>
          </a>
        </div>
        {% endif %}
        {% if downloads.pc %}
        <div class="col-2">
          <a href="/appliance/{{ short_name }}/vm">
            <h3 class="p-heading--5 u-no-padding--top">
              VM
            </h3>
            <hr>
            <div class="u-align--center">
              <img src="https://assets.ubuntu.com/v1/ea34f006-Multipass+logomark_rgb.svg" style="width:40px; height: 40px;">
            </div>
          </a>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</section>

<section class="p-strip--light">
  <div class="row">
    <div class="col-10">
      <div class="u-embedded-media u-no-margin--top" style="margin-bottom: 1rem;">
        {% if "youtu" in screenshots.1 %}
        <iframe title="Screenshots" class="u-embedded-media__element" src="{{ screenshots.1 }}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        {% else %}
        <img src="{{ screenshots.1 }}" class="p-image--shadowed" alt="{{ appliance_name }} screenshots">
        {% endif %}
      </div>
    </div>
    <div class="col-2 u-align--center">
      <ul class="p-list row">
        {% for image in screenshots.values() %}
        {% if "youtu" not in image %}
        <li class="p-list__item col-small-1 col-medium-1 col-2">
          <a href="{{ image }}" class="js-lightbox-item">
            <img src="{{ image }}?w=200" alt="{{ name }} screenshot" height="150" width="150">
          </a>
        </li>
        {% endif %}
        {% endfor %}
      </ul>
    </div>
  </div>
</section>

<section class="p-strip">
  <div class="row">
    <div class="col-9">
      {{ content | safe }}
    </div>
    <div class="col-3">
      {% if maintenance_date %}
      <div class="p-label--new">Certified</div>
      {% if certification_note %}
      <p><em>{{ certification_note }}</em></p>
      {% endif %}
      <p>Maintained until {{ maintenance_date }}<br />
        {% if downloads.raspberrypi %}ARM{% endif %}{% if downloads.pc and downloads.raspberrypi %}, {% endif %}{% if downloads.pc %}x86{% endif %}
      </p>
      {% endif %}

      <h5 class="u-no-margin--bottom u-no-padding--top">Relevant links</h5>
      <ul class="p-list">
        {% for link in links.values() %}
        <li class="p-list__item"><a href="{{ link.url }}">{{ link.title }}</a></li>
        {% endfor %}
      </ul>
      <h5 class="u-no-margin--bottom u-no-padding--top">Privacy compliance</h5>
      <ul class="p-list">
        {% for comp in compliance.values() %}
        <li class="p-list__item is-ticked">{{ comp }}</li>
        {% endfor %}
      </ul>
      <h5 class="u-no-margin--bottom u-no-padding--top">Base</h5>
      <p>{{ base }}</p>
      <h5 class="u-no-margin--bottom u-no-padding--top">Date published</h5>
      <p>{{ published_date }}</p>
    </div>
  </div>
</section>

<section class="p-strip u-no-padding--top">
  <div class="row">
    <div class="col-10">
      <h2 class="p-heading--4">Snaps in the image</h2>
      <table>
        <thead>
          <tr>
            <td style="width: 33%;">&nbsp;</td>
            <th>PUBLISHER</th>
            <th>VERSION</th>
            <th>UPDATED</th>
          </tr>
        </thead>
        <tbody>
          {% for snap in snaps.values() %}
          <tr>
            <td>
              <div class="p-media-object">
                <img src="{{ snap.icon }}?w=50" alt="" class="p-media-object__image is-round" height="50" width="50">
                <div class="p-media-object__details">
                  <p>
                    <a href="{{ snap.link }}">{{ snap.name }}</a>
                  </p>
                </div>
              </div>
            </td>
            <td><p>{{ snap.publisher }}</p></td>
            <td><p>{{ snap.version }}</p></td>
            <td><p>{{ snap.published_date }}</p></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</section>

<section class="p-strip u-no-padding--top">
  <div class="row">
    <div class="col-6">
      <h3>Try it out!</h3>
      <p>
        Grab a spare board{% if downloads.pc %}, PC{% endif %} or NUC.
        {% if downloads.pc %}
        We also have <a href="/appliance/{{ short_name }}/vm">instructions for virtual machine</a> testing of appliances.
        {% endif %}
      </p>
    </div>
    {% if downloads.raspberrypi %}
    <div class="col-3">
        <div class="u-align--center">
          <img src="https://assets.ubuntu.com/v1/a999bb5f-Raspberry+Pi+4.png?h=100" alt="" style="width: 50%;">
        {% if downloads.pi2 %}
      <p>
        <a href="/appliance/{{ short_name }}/raspberry-pi2">Install on a Raspberry Pi 2&nbsp;&rsaquo;
      </a>
      </p>
      {% endif %}
      <p>
        <a href="/appliance/{{ short_name }}/raspberry-pi">
           Install on a {% if pi.3 or pi.4 %}Raspberry {% if pi.3 %}3{% endif %}{% if pi.3 and pi.4%} &amp; {% endif %}{% if pi.4 %}4{% endif %}{% else %}Raspberry Pi 3 &amp; 4{{ pi.4 }}{% endif %}&nbsp;Pi&nbsp;&rsaquo;
</a>
</p>

        </div>


    </div>
    {% endif %}
    {% if downloads.intelnuc %}
    <div class="col-3">
      <a href="/appliance/{{ short_name }}/intel-nuc">
        <div class="u-align--center">
          <img src="https://assets.ubuntu.com/v1/78b65554-1920px-Intel_NUC8.jpg?h=100" style="width: 50%;">
          <p>Install on an Intel NUC&nbsp;&rsaquo;</p>
        </div>
      </a>
    </div>
    {% endif %}
  </div>
</section>

{% include "/appliance/shared/_join_the_community.html" %}

<script>
  (function () {
    var downloadForm = document.querySelector(".js-download");
    if (downloadForm) {
      const linkElement = downloadForm.querySelector('.js-download-button');
      const selectElement = downloadForm.querySelector('.js-platform-select');
      if (linkElement && selectElement) {
        selectElement.addEventListener('change', function() {
          linkElement.href = window.location.pathname + '/' + selectElement.value;
        });
      }
    }
  })();
</script>

{% endblock content %}