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

{% block content %}
<section class="site-section site-section--moderator-creator-links">
  <header class="site-section__header">
    <h1 class="site-section__heading">
      Creator links review
    </h1>
  </header>

  <section id="card-list">
    {% for link in links %}
      <article id="link-request-{{ link.id }}" class="link-request-card" data-id="{{ link.id }}">
        <section class="from">
          <h6>{{ g.artists_or_creators }}:</h6>
          <span>
            <span>{{ g.paysites[link.from_creator.service].title }}</span>: <span>{{ link.from_creator.name }}</span>
            <a href="/{{ link.from_creator.service }}/user/{{ link.from_creator.id }}">»</a>
          </span>
        </section>
        <section class="to">
          <span>
            <span>{{ g.paysites[link.to_creator.service].title }}</span>: <span>{{ link.to_creator.name }}</span>
            <a href="/{{ link.to_creator.service }}/user/{{ link.to_creator.id }}">»</a>
          </span>
        </section>
        <section class="reason">
          <h6>Reason:</h6>
          {% if link.reason %}
            <span class="reason">{{ link.reason }}</span>
          {% else %}
            <span class="reason"><i>not provided</i></span>
          {% endif %}
        </section>
        <section class="user">
          <h6>User:</h6>
          <div>
            <span>{{ link.requester.username }}</span>
            (<span>{{ link.requester.role }}</span>)
            {# nowhere to link I guess #}
            {# <a href="#">»</a> #}
          </div>
        </section>

        <section class="control">
          <button class="approve">✓</button>
          <button class="reject">✗</button>
        </section>
      </article>
    {% else %}
      <p>No pending requests. Yay!</p>
    {% endfor %}
  </section>
</section>
{% endblock content %}
