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

{% block details %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-md-8">
            <h2>{% translate "Payouts for" %} {{ loot_pool.name }}</h2>
            <p class="text-muted">
                {% translate "Payout" %}: <a href="{% url 'aapayout:fleet_detail' loot_pool.fleet.pk %}">{{ loot_pool.fleet.name }}</a>
                | {% translate "Loot Pool" %}: <a href="{% url 'aapayout:loot_detail' loot_pool.pk %}">{{ loot_pool.name }}</a>
            </p>
        </div>
        <div class="col-md-4 text-end">
            {% if can_mark_paid and pending_count > 0 %}
                <a href="{% url 'aapayout:express_mode_start' loot_pool.pk %}" class="btn btn-success me-2">
                    <i class="fas fa-bolt"></i> {% translate "Express Mode" %}
                </a>
            {% endif %}
            <a href="{% url 'aapayout:loot_detail' loot_pool.pk %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> {% translate "Back to Loot Pool" %}
            </a>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-primary">
                <div class="card-body">
                    <h6 class="card-subtitle mb-2 text-muted">{% translate "Total Payouts" %}</h6>
                    <h4 class="card-title">{{ payouts.count }}</h4>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-warning">
                <div class="card-body">
                    <h6 class="card-subtitle mb-2 text-muted">{% translate "Pending" %}</h6>
                    <h4 class="card-title">{{ pending_count }}</h4>
                    <p class="small text-muted mb-0">{{ pending_amount|isk_format_full }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-success">
                <div class="card-body">
                    <h6 class="card-subtitle mb-2 text-muted">{% translate "Paid" %}</h6>
                    <h4 class="card-title">{{ paid_count }}</h4>
                    <p class="small text-muted mb-0">{{ paid_amount|isk_format_full }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-info">
                <div class="card-body">
                    <h6 class="card-subtitle mb-2 text-muted">{% translate "Total Amount" %}</h6>
                    <h4 class="card-title">{{ total_amount|isk_format_full }}</h4>
                </div>
            </div>
        </div>
    </div>

    <!-- Payouts Table -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5>{% translate "Payout List" %}</h5>
                </div>
                <div class="card-body">
                    {% if payouts %}
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>{% translate "Recipient" %}</th>
                                    <th class="text-end">{% translate "Amount" %}</th>
                                    <th>{% translate "Verification Status" %}</th>
                                    <th>{% translate "Verified At" %}</th>
                                    <th>{% translate "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for payout in payouts %}
                                <tr {% if payout.is_scout_payout %}class="table-success"{% endif %}>
                                    <td>
                                        {{ payout.recipient.name }}
                                        {% if payout.is_scout_payout %}
                                            <span class="badge bg-success">{% translate "Scout" %}</span>
                                        {% endif %}
                                        {% if payout.recipient.character_id == request.user.profile.main_character.character_id %}
                                            <span class="badge bg-info">{% translate "You" %}</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end">
                                        <strong>{{ payout.amount|isk_format_full }}</strong>
                                        {% if payout.is_scout_payout %}
                                            <br><small class="text-success">{% translate "(includes scout bonus)" %}</small>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if payout.verified %}
                                            <span class="badge bg-success">
                                                <i class="fas fa-check-circle"></i> {% translate "Verified" %}
                                            </span>
                                        {% else %}
                                            <span class="badge bg-secondary">
                                                <i class="fas fa-clock"></i> {% translate "Pending" %}
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if payout.verified_at %}
                                            {{ payout.verified_at|date:"Y-m-d H:i" }}
                                        {% else %}
                                            —
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm" role="group">
                                            <button class="btn btn-outline-primary copy-name-btn"
                                                    data-character-name="{{ payout.recipient.name }}"
                                                    title="{% translate 'Copy character name' %}">
                                                <i class="fas fa-user"></i>
                                            </button>
                                            <button class="btn btn-outline-primary copy-amount-btn"
                                                    data-amount="{{ payout.amount }}"
                                                    title="{% translate 'Copy ISK amount (no decimals)' %}">
                                                <i class="fas fa-coins"></i>
                                            </button>
                                            <button class="btn btn-outline-info open-window-btn"
                                                    data-payout-id="{{ payout.pk }}"
                                                    data-character-id="{{ payout.recipient.id }}"
                                                    title="{% translate 'Open character window in EVE' %}">
                                                <i class="fas fa-external-link-alt"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                            <tfoot>
                                <tr class="table-active">
                                    <th>{% translate "Total" %}</th>
                                    <th class="text-end">{{ total_amount|isk_format_full }}</th>
                                    <th colspan="3"></th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>


                    {% else %}
                    <p class="text-muted">{% translate "No payouts found for this loot pool" %}</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Notes Section -->
    {% if loot_pool.notes %}
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5>{% translate "Notes" %}</h5>
                </div>
                <div class="card-body">
                    <p>{{ loot_pool.notes|linebreaks }}</p>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}