{% extends "_base.html" %}

{% block page %}devices{% endblock page%}
{% block lang %}{% if section.extra.lang %}{{ section.extra.lang }}{% else %}{{ section.lang }}{% endif %}{% endblock lang %}
{% block title %}{{ section.title }}{% endblock title %}
{% block desc %}
  <meta name="description" content="{{ section.description }}">
{% endblock desc %}

{% block content %}
{% include "_header.html" %}
<div id="wrapper">
  <main>
    {% set data = load_data(path="content" ~ section.path ~ "data.toml", format="toml") %}
    {% for devices in data.device %}
    <div class="proj">
      <div class="meta">
        <div class="name">{{ devices.name }}</div>
        <div class="tags">
          {% for tag in devices.tags %}
          <div><span>#</span>{{ tag }}</div>
          {% endfor %}
        </div>
        <div class="links">
          {% for link in devices.links -%}
          <a href="{{ link.url }}" target="_blank" rel='noreferrer noopener'>
            <span>[</span>{{ link.name }}<span>]</span>
          </a>
          {% endfor %}
        </div>
      </div>
      <div class="tags-narrow">
        {% for tag in devices.tags %}
        <div><span>#</span>{{ tag }}</div>
        {% endfor %}
      </div>
      <div class="content">
        <div class="desc">{{ devices.desc | trim | markdown | safe }}</div>
        {% if devices.img %}
        <img src="{{ devices.img }}" alt="{{ devices.name }}" />
        {% endif %}
      </div>
    </div>
    {% endfor %}
  </main>
  {% include "_footer.html" -%}
</div>
{% endblock content %}