{% extends 'settings/layout.html' %}
{% load humanize %}
{% load i18n %}
{% load utilities %}

{% block title %}{% trans "Link Domains" %}{% endblock %}

{% block header %}{% trans "Link Domains" %}{% endblock %}

{% block panel %}
<p class="notification block">
    {% trans "Link domains must be approved before they are shown on book pages. Please make sure that the domains are not hosting spam, malicious code, or deceptive links before approving." %}
</p>

<div class="block">
    <div class="tabs">
        <ul>
            {% url 'settings-link-domain' status='pending' as url %}
            <li {% if request.path in url %}class="is-active" aria-current="page"{% endif %}>
                <a href="{{ url }}">{% trans "Pending" %}</a>
            </li>
            {% url 'settings-link-domain' status='approved' as url %}
            <li {% if url in request.path %}class="is-active" aria-current="page"{% endif %}>
                <a href="{{ url }}">{% trans "Approved" %}</a>
            </li>
            {% url 'settings-link-domain' status='blocked' as url %}
            <li {% if url in request.path %}class="is-active" aria-current="page"{% endif %}>
                <a href="{{ url }}">{% trans "Blocked" %}</a>
            </li>
        </ul>
    </div>

    {% for domain in domains %}
    {% join "domain" domain.id as domain_modal %}
    <div class="box content">
        <div class="columns is-mobile">
            <header class="column">
                <h2 class="title is-5">
                    {{ domain.name }}
                    (<a href="http://{{ domain.domain }}" target="_blank" rel="noopener">{{ domain.domain }}</a>)
                </h2>
            </header>
            <div class="column is-narrow">
                <button type="button" class="button" data-modal-open="{{ domain_modal }}">
                    <span class="icon icon-pencil m-0-mobile" aria-hidden="treu"></span>
                    <span>{% trans "Set display name" %}</span>
                </button>
            </div>
        </div>
        <div class="block">
            <details class="details-panel">
                <summary>
                    <h3 class="title is-6 mb-0">
                        {% trans "View links" %}
                        ({{ domain.links.count }})
                    </h3>
                    <span class="details-close icon icon-x" aria-hidden></span>
                </summary>

                <div class="table-container mt-4">
                    <table class="is-striped">
                        <tr>
                            <th>{% trans "URL" %}</th>
                            <th>{% trans "Filetype" %}</th>
                            <th>{% trans "Book" %}</th>
                        </tr>
                    {% for link in domain.links.all|slice:10 %}
                        <tr>
                            <td>
                                <a href="{{ link.url }}" target="_blank" rel="noopener">{{ link.url }}</a>
                            </td>
                            <td>
                                {% if link.filelink.filetype %}
                                {{ link.filelink.filetype }}
                                {% endif %}
                            </td>

                            <td>
                            {% if link.filelink.filetype %}
                                {% with book=link.filelink.book %}
                                <a href="{{ book.local_path }}">{% include "snippets/book_titleby.html" with book=book %}</a>
                                {% endwith %}
                            {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                    </table>
                </div>
            </details>
        </div>

        {% include "settings/link_domains/edit_domain_modal.html" with domain=domain id=domain_modal %}

        <div class="field has-addons">
            {% if status != "approved" %}
            <form
                name="domain-{{ domains.id }}-approve"
                class="control"
                method="post"
                action="{% url 'settings-link-domain-status' domain.id 'approved' %}"
            >
                {% csrf_token %}
                <button type="submit" class="button is-success is-light">{% trans "Approve" %}</button>
            </form>
            {% endif %}
            {% if status != "blocked" %}
            <form
                name="domain-{{ domains.id }}-block"
                class="control"
                method="post"
                action="{% url 'settings-link-domain-status' domain.id 'blocked' %}"
            >
                {% csrf_token %}
                <button type="submit" class="button is-danger is-light">{% trans "Block" %}</button>
            </form>
            {% endif %}
        </div>
    </div>
    {% endfor %}

    {% if not domains.exists %}
        {% if status == "approved" %}
        <em>{% trans "No domains currently approved" %}</em>
        {% elif status == "pending" %}
        <em>{% trans "No domains currently pending" %}</em>
        {% else %}
        <em>{% trans "No domains currently blocked" %}</em>
        {% endif %}
    {% endif %}
</div>

{% endblock %}