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

{% block aacontactscontent %}
    {% include "framework/header/page-header.html" with title="Contacts" %}
    <div class="col-12">
        <div class="card mb-3">
            <div class="card-header">
                <div class="card-title mb-0">{% translate "Alliances" %}</div>
            </div>

            <div class="card-body">
                <div class="row row-cols-md-2 row-cols-lg-4 row-cols-xl-6 justify-content-evenly">
                    {% for alliance in alliance_tokens %}
                        <div class="col">
                            <div class="card h-100 text-center">
                                <img src="{{ alliance.alliance.logo_url_256 }}" class="card-img-top" alt="{{ alliance.alliance.alliance_name }}">
                                <div class="card-body">
                                    <h5 class="card-title mb-3">{{ alliance.alliance.alliance_name }}</h5>
                                    <a href="{% url "aa_contacts:alliance_contacts" alliance.alliance_id %}" class="btn btn-primary">{% translate "View" %}</a>
                                </div>
                            </div>
                        </div>
                    {% empty %}
                        <div class="col-12 text-center">
                            <h5>{% translate "No alliances available" %}</h5>
                        </div>
                    {% endfor %}
                    {% if perms.aa_contacts.manage_alliance_contacts %}
                        <div class="col">
                            <div class="card h-100">
                                <div class="card-body">
                                    <div class="d-flex justify-content-center align-items-center h-100">
                                        <a href="{% url "aa_contacts:add_alliance_token" %}" class="btn btn-primary">
                                            <i class="fa-solid fa-plus"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <div class="card-title mb-0">{% translate "Corporations" %}</div>
            </div>

            <div class="card-body">
                <div class="row row-cols-md-2 row-cols-lg-4 row-cols-xl-6 justify-content-evenly">
                    {% for corporation in corporation_tokens %}
                        <div class="col">
                            <div class="card h-100 text-center">
                                <img src="{{ corporation.corporation.logo_url_256 }}" class="card-img-top" alt="{{ corporation.corporation.corporation_name }}">
                                <div class="card-body">
                                    <h5 class="card-title mb-3">{{ corporation.corporation.corporation_name }}</h5>
                                    <a href="{% url "aa_contacts:corporation_contacts" corporation.corporation_id %}" class="btn btn-primary">{% translate "View" %}</a>
                                </div>
                            </div>
                        </div>
                    {% empty %}
                        <div class="col-12 text-center">
                            <h5>{% translate "No corporations available" %}</h5>
                        </div>
                    {% endfor %}
                    {% if perms.aa_contacts.manage_corporation_contacts %}
                        <div class="col">
                            <div class="card h-100">
                                <div class="card-body">
                                    <div class="d-flex justify-content-center align-items-center h-100">
                                        <a href="{% url "aa_contacts:add_corporation_token" %}" class="btn btn-primary">
                                            <i class="fa-solid fa-plus"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock aacontactscontent %}
