{% extends 'components/shell.html' %}

{% import 'components/site.html' as site %}
{% from 'components/card_list.html' import card_list %}
{% from 'components/cards/dm.html' import dm_card %}
{% from 'components/ads.html' import slider_ad, header_ad %}

{% block content %}
{% call site.section("all-dms", title="DMs") %}
  {{ slider_ad() }}
  {{ header_ad() }}
  <div class="paginator" id="paginator-top">
    {% include 'components/paginator.html' %}
    <form
      action="/dms"
      method="GET"
      enctype="application/x-www-form-urlencoded"
    >
      <input
        type="text"
        name="q"
        id="q"
        autocomplete="off"
        value="{{ request.args.get('q') if request.args.get('q') }}"
        minlength="3"
        class="search-input"
        placeholder="search for dms..."
      >
      <input type="submit" style="display: none">
    </form>
  </div>

  {% call card_list("phone") %}
    {% for dm in props.dms %}
      {{ dm_card(dm, artist=dm|attr("artist") or {}, is_global=True) }}
    {% else %}
      <div class="no-results">
        <h2 class="site-section__subheading">Nobody here but us chickens!</h2>
        <p class="subtitle">
          There are no DMs.
        </p>
      </div>
    {% endfor %}
  {% endcall %}

  <div class="paginator" id="paginator-bottom">
    {% include 'components/paginator.html' %}
  </div>
{% endcall %}
{% endblock %}