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

{% from 'components/cards/dm.html' import dm_card %}

{% block title %}
  <title>Approve DMs for import to {{ g.site_name }}.</title>
{% endblock title %}

{% block meta %}
  <meta name="account_id" content="{{ props.account_id }}">
{% endblock meta %}

{% block content %}
<section
  class="site-section site-section--review-dms"
>
  <header class="site-section__header">
    <h1 class="site-section__heading">
      DM Review for {{ props.import_id }}
    </h1>
    <form autocomplete="off" id="search-form" class="search-form" novalidate="novalidate" accept-charset="UTF-8">
      <div>
        <label for="status">Status</label>
        <select id="status" name="status">
          <option value="pending" {{ "selected" if props.status == "pending" else "" }}>Pending</option>
          <option value="ignored" {{ "selected" if props.status == "ignored" else "" }}>Ignored</option>
        </select>
      </div>
    </form>
  </header>
  {% if props.dms %}
    <form
      id="dm-approval"
      class="form form--wide dms"
      method="POST"
    >
      {% for dm in props.dms %}
        <div class="form__section dms__dm">
          <input
            id="{{ dm.hash }}"
            class="dms__check"
            type="checkbox"
            name="approved_hashes"
            value="{{ dm.hash }}"
          >
          <div class="dms__content">
            {{ dm_card(dm, class_name='dms__card', is_private=true, artist=(dm|attr("artist") or {}) ) }}
            <label class="dms__approve" for="{{ dm.hash }}">
              Approve
            </label>
          </div>
        </div>
      {% endfor %}
      {% if props.status == "ignored" %}
        <div id="consent" class="form__section form__section--checkbox">
          <input class="form__input" type="checkbox" id="delete_ignored" name="delete_ignored" value="1">
          <label class="form__label" for="delete_ignored">
            Delete ignored DMs
            <br>
            <small class="form__subtitle">
              On next reimport you will have to look at them again and they won't be automatically ignored
            </small>
          </label>
          </div>
      {% endif %}
      <div class="form__section">
        <button
          type="submit"
          class="form__button form__button--submit"
        >
          Submit approved DMs.
        </button>
      </div>
    </form>
  {% else %}
    <p class="no-dms">
      There are no DMs waiting for approval.
    </p>
  {% endif %}
</section>
{% endblock %}
