{% extends 'aa_contacts/base.html' %}

{% block page_title %}Alliance Contacts{% endblock page_title %}

{% block extra_css %}
    {% include "bundles/datatables-css-bs5.html" %}
{% endblock %}

{% block aacontactscontent %}
    <h1 class="page-header text-center">{{ alliance.alliance_name }} Contacts</h1>
    <div class="row justify-content-center my-3">
        <div class="col-6">
            <div class="card-group">
                <div class="card text-center">
                    <div class="card-header">
                        Last update
                    </div>
                    <div class="card-body">
                        {% if token is None %}
                            <p>No token present</p>
                        {% else %}
                            <p>{{ token.last_update|date:"d/m/Y G:i e" }}</p>
                        {% endif %}
                    </div>
                </div>
                <div class="card text-center">
                    <div class="card-header">
                        Actions
                    </div>
                    <div class="card-body">
                        {% if token is None %}
                            <a class="btn btn-primary" href="{% url "aa_contacts:add_token" %}">Add token</a>
                        {% else %}
                            <a class="btn btn-primary" href="{% url "aa_contacts:update_alliance" %}">Update</a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-aa">
                        <thead>
                            <tr>
                                <th>Contact</th>
                                <th>Contact Type</th>
                                <th>Labels</th>
                                <th>Standing</th>
                                <th>Notes</th>
                                <th></th>
                            </tr>
                        </thead>

                        <tbody>
                            {% for contact in contacts %}
                                <tr>
                                    <td>
                                        <img src="{{ contact.image_src }}" class="rounded me-2">
                                        {{ contact.contact_name }}
                                    </td>
                                    <td>{{ contact.contact_type }}</td>
                                    <td>{% for label in contact.labels.all %}{{ label.label_name }}{% if not forloop.last %}, {% endif %}{% endfor %}</td>
                                    <td>{{ contact.standing }}</td>
                                    <td>{{ contact.notes }}</td>
                                    <td><a href="{% url "aa_contacts:update_contact" contact.pk %}" class="btn btn-outline-success btn-sm"><i class="fa-solid fa-pen"></i></a></td>
                                </tr>
                            {% endfor %}
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock aacontactscontent %}

{% block extra_javascript %}
    {% include "bundles/datatables-js-bs5.html" %}
    {% include "bundles/filterdropdown-js.html" %}
{% endblock extra_javascript %}

{% block extra_script %}
    $(document).ready(function() {
        $('.table').DataTable({
            columnDefs: [
                { targets: [5], sortable: false, searchable: false }
            ],
            "pageLength": 50,
            filterDropDown: {
                bootstrap: true,
                bootstrap_version: 5,
                columns: [
                    {
                        idx: 1,
                        title: 'Contact Type'
                    },
                    {
                        idx: 3,
                        title: 'Standing'
                    }
                ]
            }
        });
    });
{% endblock extra_script %}