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

{% block details %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-md-8 mx-auto">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h2>{% translate "Import Fleet from ESI" %}</h2>
                <a href="{% url 'aapayout:fleet_detail' fleet.pk %}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> {% translate "Back to Fleet" %}
                </a>
            </div>

            <!-- Instructions Card -->
            <div class="card mb-4 border-info">
                <div class="card-header bg-info text-white">
                    <h5><i class="fas fa-info-circle"></i> {% translate "How to Import Your Fleet" %}</h5>
                </div>
                <div class="card-body">
                    <ol class="mb-0">
                        <li class="mb-2">
                            <strong>{% translate "Be in the fleet" %}:</strong>
                            {% translate "You must be in the EVE Online fleet you want to import." %}
                        </li>
                        <li class="mb-2">
                            <strong>{% translate "Authorize ESI access" %}:</strong>
                            {% translate "If you haven't already, you'll need to add your character with the required ESI scopes." %}
                        </li>
                        <li class="mb-2">
                            <strong>{% translate "Click Import" %}:</strong>
                            {% translate "The system will automatically detect which fleet you're in and import all members." %}
                        </li>
                    </ol>
                    <div class="alert alert-warning mt-3 mb-0">
                        <i class="fas fa-exclamation-triangle"></i>
                        <strong>{% translate "Important" %}:</strong>
                        {% translate "Make sure you're logged into EVE Online and in the fleet before clicking Import." %}
                    </div>
                </div>
            </div>

            <!-- Import Form -->
            <div class="card">
                <div class="card-header">
                    <h5>{% translate "Fleet Import" %}</h5>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}

                        <p class="text-muted">
                            {% translate "This will automatically import all members from the fleet you're currently in." %}
                        </p>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-success btn-lg">
                                <i class="fas fa-download"></i> {% translate "Import Current Fleet" %}
                            </button>
                        </div>
                    </form>

                    <hr class="my-4">

                    <div class="alert alert-info mb-0">
                        <h6><i class="fas fa-key"></i> {% translate "Need ESI Access?" %}</h6>
                        <p class="mb-2">{% translate "If you haven't added your character with ESI fleet access yet, you'll need to:" %}</p>
                        <ol class="mb-2">
                            <li>{% translate "Go to your profile and add/update your character" %}</li>
                            <li>{% translate "Make sure to authorize the 'esi-fleets.read_fleet.v1' scope" %}</li>
                        </ol>
                        <a href="/account/characters/add/" class="btn btn-sm btn-outline-primary">
                            <i class="fas fa-user-plus"></i> {% translate "Add/Update Character" %}
                        </a>
                    </div>
                </div>
            </div>

            <!-- Recent Imports -->
            {% if recent_imports %}
            <div class="card mt-4">
                <div class="card-header">
                    <h5>{% translate "Recent Imports" %}</h5>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-hover">
                        <thead>
                            <tr>
                                <th>{% translate "Date" %}</th>
                                <th>{% translate "ESI Fleet ID" %}</th>
                                <th>{% translate "Characters Found" %}</th>
                                <th>{% translate "Added" %}</th>
                                <th>{% translate "Unique Players" %}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for import_record in recent_imports %}
                            <tr>
                                <td>{{ import_record.imported_at|date:"Y-m-d H:i" }}</td>
                                <td><code>{{ import_record.esi_fleet_id }}</code></td>
                                <td>{{ import_record.characters_found }}</td>
                                <td>{{ import_record.characters_added }}</td>
                                <td><strong>{{ import_record.unique_players }}</strong></td>
                                <td>
                                    <a href="{% url 'aapayout:fleet_import_results' import_record.pk %}"
                                       class="btn btn-sm btn-outline-primary">
                                        {% translate "View Details" %}
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}