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

{% block title %}Ubuntu Appliance{% endblock %}

{% block meta_description %}
  Ubuntu Appliances are certified to run flawlessly on Raspberry Pi and PC boards. They are free, privacy-friendly and come with maintenance guarantees.
{% endblock %}

{% block meta_copydoc %}
  https://docs.google.com/document/d/1DABafCPzl9WwOmHX8ejkkiUEKXI2fTlF7UXNB0Xhlo0/edit
{% endblock meta_copydoc %}

{% block content %}

  <section class="p-strip--suru-bottomed">
    <div class="row">
      <h1>Find your favourite Ubuntu Appliance</h1>
    </div>
  </section>

  {% if appliances %}
    <section class="p-strip--light is-bordered">
      <div class="row">
        {% for app in appliances|sort %}
          {%- if loop.index == 7 %}
          </div>
          <div class="row">
          {% endif %}
          <div class="col-2 u-sv3">
            <a href="/appliance/{{ appliances[app].url_name }}" class="p-link--soft">
              <h3 class="p-heading--5 u-no-padding--top">{{ appliances[app].name }}</h3>
              <hr class="p-rule--muted" />
              <div class="u-align--center">
                <img src="{{ appliances[app].logo }}?h=72"
                     alt="{{ appliances[app].name }} logo"
                     style="max-height:72px" />
              </div>
            </a>
          </div>
        {% endfor %}
      </div>
    </section>
  {% endif %}

  <section class="p-strip is-deep">
    <div class="row u-equal-height">
      <div class="col-8">
        <h3>Turn your app into an Ubuntu Appliance</h3>
        <p>
          Anyone can build their own Ubuntu Appliance, a software-defined IoT device that uses Ubuntu for security and to stay up to date. But it's really all you. See our <a href="/appliance/community">community page</a> for more information or jump right to discourse to propose your new Ubuntu Appliance and start the conversation.
        </p>
        <p>
          <a class="p-button" href="https://discourse.ubuntu.com/c/appliance">Propose your new appliance</a>
        </p>
      </div>
      <div class="col-4 u-hide--medium u-hide--small u-align--center u-vertically-center">
        {{ image(url="https://assets.ubuntu.com/v1/7de21966-snapshot.svg",
                alt="",
                height="140",
                width="140",
                hi_def=True,
                loading="auto") | safe
        }}
      </div>
    </div>
  </section>

{% endblock %}