{% 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>{{ fleet.name }}</h2>
            <p class="text-muted">
                <i class="fas fa-user"></i> {{ fleet.fleet_commander.username }}
                | <i class="fas fa-calendar"></i> {{ fleet.fleet_time|date:"Y-m-d H:i" }}
            </p>
        </div>
        <div class="col-md-4 text-end">
            {% if can_edit %}
                <form method="post" action="{% url 'aapayout:fleet_delete' fleet.pk %}" style="display: inline;">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger"
                            onclick="return confirm('{% translate "Are you sure you want to delete this payout?" %}')">
                        <i class="fas fa-trash"></i> {% translate "Delete" %}
                    </button>
                </form>
            {% endif %}
        </div>
    </div>

    <!-- Payout Info Card -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>{% translate "Payout Information" %}</h5>
                </div>
                <div class="card-body">
                    <form method="post" action="{% url 'aapayout:fleet_edit' fleet.pk %}" id="fleet-edit-form">
                        {% csrf_token %}
                        <table class="table table-sm">
                            <tr>
                                <th>{% translate "Payout Name" %}:</th>
                                <td>
                                    {% if can_edit %}
                                    <input type="text" name="name" value="{{ fleet.name }}"
                                           class="form-control form-control-sm">
                                    {% else %}
                                    {{ fleet.name }}
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>{% translate "Date" %}:</th>
                                <td>
                                    {% if can_edit %}
                                    <input type="datetime-local" name="fleet_time"
                                           value="{{ fleet.fleet_time|date:'Y-m-d\TH:i' }}"
                                           class="form-control form-control-sm">
                                    {% else %}
                                    {{ fleet.fleet_time|date:"Y-m-d H:i" }}
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>{% translate "Battle Report" %}:</th>
                                <td>
                                    {% if can_edit %}
                                    <input type="url" name="battle_report"
                                           value="{{ fleet.battle_report|default:'' }}"
                                           class="form-control form-control-sm"
                                           placeholder="https://">
                                    {% else %}
                                    {% if fleet.battle_report %}
                                        <a href="{{ fleet.battle_report }}" target="_blank">{{ fleet.battle_report }}</a>
                                    {% else %}
                                        <span class="text-muted">—</span>
                                    {% endif %}
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>{% translate "Status" %}:</th>
                                <td>
                                    {% if fleet.status == 'draft' %}
                                        <span class="badge bg-secondary">{{ fleet.get_status_display }}</span>
                                    {% elif fleet.status == 'active' %}
                                        <span class="badge bg-primary">{{ fleet.get_status_display }}</span>
                                    {% elif fleet.status == 'completed' %}
                                        <span class="badge bg-success">{{ fleet.get_status_display }}</span>
                                    {% elif fleet.status == 'paid' %}
                                        <span class="badge bg-info">{{ fleet.get_status_display }}</span>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>{% translate "Participants" %}:</th>
                                <td>{{ participants.count }}</td>
                            </tr>
                            <tr>
                                <th>{% translate "Total Loot Value" %}:</th>
                                <td><strong>{{ fleet.get_total_loot_value|isk_format_full }}</strong></td>
                            </tr>
                            <tr>
                                <th>{% translate "Created" %}:</th>
                                <td>{{ fleet.created_at|date:"Y-m-d H:i" }}</td>
                            </tr>
                        </table>
                        <div class="mt-3">
                            <strong>{% translate "Notes" %}:</strong>
                            {% if can_edit %}
                            <textarea name="notes" class="form-control mt-2" rows="3">{{ fleet.notes|default:'' }}</textarea>
                            {% else %}
                            {% if fleet.notes %}
                                <p>{{ fleet.notes|linebreaks }}</p>
                            {% else %}
                                <p class="text-muted">—</p>
                            {% endif %}
                            {% endif %}
                        </div>
                        {% if can_edit %}
                        <div class="mt-3">
                            <button type="submit" class="btn btn-success btn-sm">
                                <i class="fas fa-save"></i> {% translate "Save Changes" %}
                            </button>
                        </div>
                        {% endif %}
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>{% translate "Loot" %}</h5>
                </div>
                <div class="card-body">
                    {% if loot_pools %}
                        {% with loot_pool=loot_pools.first %}
                        <p class="mb-2">
                            <strong>{{ loot_pool.items.count }} {% translate "items" %}</strong> {% translate "valued at" %}
                            <strong class="text-primary">{{ loot_pool.total_value|isk_format_full }}</strong>
                        </p>

                        {% if can_edit %}
                        <div class="mb-3 p-3 bg-light rounded">
                            <label for="scout-bonus-slider" class="form-label">
                                <i class="fas fa-binoculars"></i> {% translate "Scout Bonus" %}:
                                <strong><span id="scout-bonus-value">{{ loot_pool.scout_bonus_percentage|floatformat:0 }}</span>%</strong>
                            </label>
                            <input type="range" class="form-range" id="scout-bonus-slider"
                                   min="0" max="100" step="10"
                                   value="{{ loot_pool.scout_bonus_percentage|floatformat:0 }}"
                                   data-loot-pool-id="{{ loot_pool.pk }}">
                            <div class="d-flex justify-content-between text-muted small">
                                <span>0%</span>
                                <span>50%</span>
                                <span>100%</span>
                            </div>
                            <small class="text-muted d-block mt-2">
                                <i class="fas fa-info-circle"></i> {% translate "Adjust scout bonus percentage - payouts will update automatically" %}
                            </small>
                        </div>
                        {% endif %}

                        <div class="d-flex flex-wrap gap-2">
                            {% if can_edit %}
                            <a href="{% url 'aapayout:loot_edit' loot_pool.pk %}" class="btn btn-sm btn-primary">
                                <i class="fas fa-edit"></i> {% translate "Edit Loot" %}
                            </a>
                            <a href="{% url 'aapayout:loot_reappraise' loot_pool.pk %}" class="btn btn-sm btn-warning">
                                <i class="fas fa-sync"></i> {% translate "Reappraise" %}
                            </a>
                            {% if loot_pool.payouts.exists %}
                            <form method="post" action="{% url 'aapayout:regenerate_payouts' loot_pool.pk %}" style="display: inline;">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-sm btn-secondary"
                                        title="{% translate 'Manually recalculate all payouts based on current fleet composition' %}">
                                    <i class="fas fa-calculator"></i> {% translate "Recalculate Payouts" %}
                                </button>
                            </form>
                            {% if not fleet.finalized %}
                            <form method="post" action="{% url 'aapayout:fleet_verify_payouts' fleet.pk %}" style="display: inline;">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-sm btn-info"
                                        title="{% translate 'Check ESI wallet for completed payments' %}">
                                    <i class="fas fa-check-double"></i> {% translate "Verify Payouts" %}
                                </button>
                            </form>
                            <form method="post" action="{% url 'aapayout:fleet_finalize' fleet.pk %}" style="display: inline;">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-sm btn-success"
                                        onclick="return confirm('{% translate "Finalize this payout and verify all payments via ESI wallet? This action cannot be undone." %}')"
                                        title="{% translate 'Finalize payout and verify payments via ESI wallet journal' %}">
                                    <i class="fas fa-flag-checkered"></i> {% translate "Finalize Payout" %}
                                </button>
                            </form>
                            {% endif %}
                            {% endif %}
                            {% if fleet.finalized %}
                            <span class="badge bg-success" title="{% translate 'Finalized at' %} {{ fleet.finalized_at|date:'Y-m-d H:i' }} {% translate 'by' %} {{ fleet.finalized_by.username }}">
                                <i class="fas fa-check-circle"></i> {% translate "Finalized" %}
                            </span>
                            {% endif %}
                            {% endif %}
                        </div>
                        {% endwith %}
                    {% else %}
                        <p class="text-muted">{% translate "No loot added yet" %}</p>
                        {% if can_edit %}
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addLootModal">
                            <i class="fas fa-plus"></i> {% translate "Add Loot" %}
                        </button>
                        {% if participants.count == 0 %}
                        <small class="text-muted d-block mt-2">
                            <i class="fas fa-info-circle"></i> {% translate "Tip: Payouts will be calculated automatically whether you add participants before or after loot" %}
                        </small>
                        {% endif %}
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Payout Summary -->
    {% if payout_summary %}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-primary">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-calculator"></i> {% translate "Payout Summary" %}</h5>
                </div>
                <div class="card-body">
                    <table class="table table-sm mb-0">
                        <tr>
                            <td>{% translate "Participant Pool" %}:</td>
                            <td class="text-end"><strong>{{ payout_summary.total_payouts|isk_format_full }}</strong></td>
                        </tr>
                        <tr>
                            <td>{% translate "Corp Share" %}:</td>
                            <td class="text-end"><strong>{{ payout_summary.corp_final|isk_format_full }}</strong></td>
                        </tr>
                        <tr class="table-primary">
                            <td><strong>{% translate "Total" %}:</strong></td>
                            <td class="text-end"><strong>{{ payout_summary.total_loot|isk_format_full }}</strong></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- ESI Wallet Scope Warning -->
    {% if wallet_scope_status.needs_verification and not wallet_scope_status.has_wallet_scope %}
    <div class="row mb-4">
        <div class="col-12">
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <h6><i class="fas fa-exclamation-triangle"></i> {% translate "ESI Scope Required for Payment Verification" %}</h6>
                <p class="mb-2">
                    {% translate "To finalize this payout and automatically verify payments, you need to add an ESI token with wallet journal access." %}
                </p>
                <p class="small mb-2">
                    <strong>{% translate "Required scope:" %}</strong> <code>esi-wallet.read_character_journal.v1</code>
                </p>
                <p class="small mb-3">
                    {% translate "Without this scope, you must manually verify all payments before finalizing." %}
                </p>
                <a href="{% url 'aapayout:add_esi_wallet_scope' %}"
                   class="btn btn-warning btn-sm"
                   title="{% translate 'Add ESI token for' %} {{ wallet_scope_status.fc_character_name }}. {% translate 'Required scope:' %} esi-wallet.read_character_journal.v1">
                    <i class="fas fa-key"></i> {% translate "Add ESI Token for" %} {{ wallet_scope_status.fc_character_name }}
                </a>
                <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="alert">
                    {% translate "Dismiss" %}
                </button>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- User Guidance Messages -->
    {% if loot_pools %}
        {% with loot_pool=loot_pools.first %}
            {% if fleet.finalized %}
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="alert alert-success">
                            <h6><i class="fas fa-check-circle"></i> {% translate "Payout Finalized" %}</h6>
                            <p class="mb-2">
                                {% translate "This payout was finalized by" %} <strong>{{ fleet.finalized_by.username }}</strong>
                                {% translate "on" %} {{ fleet.finalized_at|date:"Y-m-d H:i" }}.
                            </p>
                            <p class="small mb-0">
                                {% translate "Wallet verification has been run to automatically verify payments. Check the 'Verified' badges in the Participants table below to see verification status." %}
                            </p>
                        </div>
                    </div>
                </div>
            {% elif loot_pool.payouts.count > 0 %}
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="alert alert-info">
                            <h6><i class="fas fa-info-circle"></i> {% translate "Paying Out ISK" %}</h6>
                            <p class="mb-2">{% translate "To pay participants, use the action buttons in the Participants table below:" %}</p>
                            <ul class="small mb-0">
                                <li><strong>{% translate "Copy Name" %}:</strong> {% translate "Copy character name to clipboard" %}</li>
                                <li><strong>{% translate "Copy Amount" %}:</strong> {% translate "Copy ISK amount (whole number, no decimals)" %}</li>
                                <li><strong>{% translate "Open Window" %}:</strong> {% translate "Open character window in EVE client (requires ESI)" %}</li>
                            </ul>
                            <p class="small text-muted mb-2 mt-2">
                                <strong>{% translate "Note:" %}</strong> {% translate "Payouts are automatically recalculated when you add, remove, or change participants." %}
                            </p>
                            <p class="small mb-0 mt-2">
                                <strong>{% translate "Finalize Payout:" %}</strong>
                                {% translate "When you're done making payments in EVE, click 'Finalize Payout' above to automatically verify all payments via ESI wallet journal." %}
                            </p>
                        </div>
                    </div>
                </div>
            {% elif loot_pool.payouts.count == 0 and participants.count > 0 %}
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="alert alert-warning">
                            <h6><i class="fas fa-exclamation-triangle"></i> {% translate "Loot Below Minimum Threshold" %}</h6>
                            <p class="mb-0">
                                {% translate "The loot value results in individual shares below 100M ISK per participant. As per payout policy, all ISK from this payout will go to the corporation. No participant payouts will be distributed." %}
                            </p>
                        </div>
                    </div>
                </div>
            {% elif loot_pool.payouts.count == 0 and participants.count == 0 %}
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="alert alert-warning">
                            <h6><i class="fas fa-exclamation-triangle"></i> {% translate "No Payouts Generated" %}</h6>
                            <p class="mb-0">{% translate "Add participants below to generate payouts. Payouts will be calculated automatically." %}
                        </div>
                    </div>
                </div>
            {% endif %}
        {% endwith %}
    {% endif %}

    <!-- Participants Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">{% translate "Participants" %}</h5>
                        {% if can_edit %}
                            <div>
                                {% if esi_status.enabled %}
                                    {% if not esi_status.fc_character_id %}
                                        {# No FC character selected #}
                                        <button class="btn btn-sm btn-secondary me-2" disabled
                                                title="{% translate 'Select an FC character from the dropdown in the navigation bar' %}">
                                            <i class="fas fa-user-slash"></i> {% translate "Select FC Character" %}
                                        </button>
                                    {% elif not esi_status.has_scope %}
                                        {# FC character selected but no ESI token #}
                                        <a href="{% url 'aapayout:add_esi_fleet_scope' %}"
                                           class="btn btn-sm btn-warning me-2"
                                           title="{% translate 'Add ESI token for' %} {{ esi_status.fc_character_name }}. {% translate 'Required scope:' %} esi-fleets.read_fleet.v1">
                                            <i class="fas fa-key"></i> {% translate "Add ESI Token" %}
                                        </a>
                                    {% elif esi_status.can_import %}
                                        {# Everything ready - show enabled import button #}
                                        <form method="post" action="{% url 'aapayout:fleet_import' fleet.pk %}" style="display: inline;">
                                            {% csrf_token %}
                                            <button type="submit" class="btn btn-sm btn-success me-2"
                                                    title="{% translate 'Import current fleet from EVE Online' %}">
                                                <i class="fas fa-download"></i> {% translate "Import ESI Fleet" %}
                                            </button>
                                        </form>
                                    {% else %}
                                        {# Fallback - show disabled button #}
                                        <button type="button" class="btn btn-sm btn-secondary me-2" disabled
                                                title="{{ esi_status.message }}">
                                            <i class="fas fa-ban"></i> {% translate "Import Unavailable" %}
                                        </button>
                                    {% endif %}
                                {% endif %}
                                <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addParticipantModal">
                                    <i class="fas fa-plus"></i> {% translate "Add Manual" %}
                                </button>
                            </div>
                        {% endif %}
                    </div>
                    {% if can_edit and esi_status.enabled %}
                        {# Show helpful hints based on current state #}
                        {% if not esi_status.fc_character_id %}
                            <small class="text-muted d-block mt-2">
                                <i class="fas fa-info-circle"></i> {% translate "Select your FC character from the dropdown in the top navigation bar to enable ESI fleet import" %}
                            </small>
                        {% elif not esi_status.has_scope %}
                            <small class="text-muted d-block mt-2">
                                <i class="fas fa-info-circle"></i> {% translate "Click 'Add ESI Token' above to add your character. When prompted, make sure to grant the" %} <code>esi-fleets.read_fleet.v1</code> {% translate "scope for" %} {{ esi_status.fc_character_name }}
                            </small>
                        {% elif esi_status.can_import %}
                            <small class="text-muted d-block mt-2">
                                <i class="fas fa-info-circle"></i> {% translate "Join a fleet in EVE Online, then click 'Import ESI Fleet' to automatically add all members" %}
                            </small>
                        {% endif %}
                    {% endif %}
                </div>
                <div class="card-body">
                    {% if participants %}
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>{% translate "Main Character" %}</th>
                                    <th>{% translate "Characters" %}</th>
                                    <th>{% translate "Status" %}</th>
                                    {% if payout_map %}
                                        <th class="text-end">{% translate "Payout Amount" %}</th>
                                    {% endif %}
                                    {% if can_edit %}
                                        <th class="text-center">
                                            <i class="fas fa-binoculars" title="{% translate 'Scout' %}"></i>
                                            {% translate "Scout" %}
                                        </th>
                                        <th class="text-center">
                                            <i class="fas fa-ban" title="{% translate 'Exclude from Payout' %}"></i>
                                            {% translate "Exclude" %}
                                        </th>
                                        <th>{% translate "Actions" %}</th>
                                    {% endif %}
                                </tr>
                            </thead>
                            <tbody>
                                {% for group in participant_groups.values %}
                                {% with main_char=group.main_character main_char_id=group.main_character.id first_participant=group.participants.0 %}
                                <tr class="{% if group.excluded %}table-secondary text-muted{% endif %}"
                                    id="participant-row-{{ first_participant.pk }}">
                                    <td>
                                        <strong class="copy-on-click" data-copy-text="{{ main_char.name }}" style="cursor: pointer;" title="{% translate 'Click to copy name' %}">
                                            {{ main_char.name }}
                                        </strong>
                                    </td>
                                    <td>
                                        {% if group.participants|length > 1 %}
                                            <span class="badge bg-secondary me-1">{{ group.participants|length }} {% translate "characters" %}</span>
                                            {% for p in group.participants %}
                                                <span class="small text-muted">{{ p.character.name }}{% if not forloop.last %}, {% endif %}</span>
                                            {% endfor %}
                                        {% else %}
                                            {{ first_participant.character.name }}
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if first_participant.is_active %}
                                            <span class="badge bg-success">{% translate "Active" %}</span>
                                        {% else %}
                                            <span class="badge bg-secondary">{% translate "Left" %}</span>
                                        {% endif %}
                                    </td>
                                    {% if payout_map %}
                                        <td class="text-end">
                                            {% if main_char_id in payout_map %}
                                                <strong class="copy-on-click" data-copy-text="{{ payout_map|get_item:main_char_id }}" style="cursor: pointer;" title="{% translate 'Click to copy amount (no decimals)' %}">
                                                    {{ payout_map|get_item:main_char_id|isk_format_full }}
                                                </strong>
                                                {% if group.is_scout %}
                                                    <span class="badge bg-success ms-1">{% translate "Scout" %}</span>
                                                {% endif %}
                                            {% else %}
                                                <span class="text-muted">—</span>
                                            {% endif %}
                                        </td>
                                    {% endif %}
                                    {% if can_edit %}
                                    <td class="text-center">
                                        <input type="checkbox" class="form-check-input scout-checkbox"
                                               data-participant-id="{{ first_participant.pk }}"
                                               {% if group.is_scout %}checked{% endif %}>
                                    </td>
                                    <td class="text-center">
                                        <input type="checkbox" class="form-check-input exclude-checkbox"
                                               data-participant-id="{{ first_participant.pk }}"
                                               {% if group.excluded %}checked{% endif %}>
                                    </td>
                                    <td>
                                        {% if main_char_id in existing_payouts %}
                                            {% with payout_obj=existing_payouts|get_item:main_char_id %}
                                            <div class="d-flex align-items-center gap-2">
                                                <div class="btn-group btn-group-sm" role="group">
                                                    <button class="btn btn-outline-primary copy-name-btn"
                                                            data-character-name="{{ main_char.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_map|get_item:main_char_id }}"
                                                            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_obj.pk }}"
                                                            data-character-id="{{ main_char_id }}"
                                                            title="{% translate 'Open character window in EVE' %}">
                                                        <i class="fas fa-external-link-alt"></i>
                                                    </button>
                                                    {% if not payout_obj.verified and not fleet.finalized %}
                                                    <button class="btn btn-outline-success mark-verified-btn"
                                                            data-payout-id="{{ payout_obj.pk }}"
                                                            title="{% translate 'Mark as verified (manual override)' %}">
                                                        <i class="fas fa-check"></i>
                                                    </button>
                                                    {% endif %}
                                                </div>
                                                {% if payout_obj.verified %}
                                                    <span class="badge bg-success" title="{% translate 'Verified at' %} {{ payout_obj.verified_at|date:'Y-m-d H:i' }}">
                                                        <i class="fas fa-check-circle"></i> {% translate "Verified" %}
                                                    </span>
                                                {% else %}
                                                    <span class="badge bg-secondary" title="{% translate 'Not yet verified' %}">
                                                        <i class="fas fa-clock"></i> {% translate "Pending" %}
                                                    </span>
                                                {% endif %}
                                            </div>
                                            {% endwith %}
                                        {% else %}
                                            <form method="post" action="{% url 'aapayout:participant_remove' first_participant.pk %}" style="display: inline;">
                                                {% csrf_token %}
                                                <button type="submit" class="btn btn-danger btn-sm" title="{% translate 'Remove' %}"
                                                        onclick="return confirm('{% translate "Remove this participant?" %}')">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        {% endif %}
                                    </td>
                                    {% endif %}
                                </tr>
                                {% endwith %}
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <p class="text-muted">{% translate "No participants added yet" %}</p>
                    {% if can_edit %}
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addParticipantModal">
                        <i class="fas fa-plus"></i> {% translate "Add First Participant" %}
                    </button>
                    {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Add Participant Modal -->
    {% if can_edit %}
    <div class="modal fade" id="addParticipantModal" tabindex="-1" aria-labelledby="addParticipantModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addParticipantModalLabel">{% translate "Add Participant" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="post" action="{% url 'aapayout:participant_add' fleet.pk %}" id="participant-add-form">
                    {% csrf_token %}
                    <div class="modal-body">
                        <div class="mb-3 position-relative">
                            <label for="character_name" class="form-label">{% translate "Character Name" %} *</label>
                            <input type="text" name="character_name" id="character_name"
                                   class="form-control character-autocomplete"
                                   placeholder="{% translate 'Start typing character name...' %}"
                                   autocomplete="off" required>
                            <div id="participant-suggestions" class="list-group position-absolute w-100"
                                 style="z-index: 9999; display: none; max-height: 300px; overflow-y: auto;"></div>
                            <small class="form-text text-muted">{% translate "Type to search for characters in Alliance Auth" %}</small>
                        </div>
                        <div class="mb-3">
                            <label for="role" class="form-label">{% translate "Role" %}</label>
                            <select name="role" id="role" class="form-select">
                                <option value="regular">{% translate "Regular" %}</option>
                                <option value="scout">{% translate "Scout" %}</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="id_is_scout" name="is_scout">
                                <label class="form-check-label" for="id_is_scout">
                                    <i class="fas fa-binoculars text-primary"></i>
                                    {% translate "Mark as Scout (receives +10% bonus)" %}
                                </label>
                                <small class="form-text text-muted d-block">
                                    {% translate "Scouts receive bonus payout percentage" %}
                                </small>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                        <button type="submit" class="btn btn-primary">{% translate "Add Participant" %}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Add Loot Modal -->
    {% if can_edit and not loot_pools %}
    <div class="modal fade" id="addLootModal" tabindex="-1" aria-labelledby="addLootModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addLootModalLabel">{% translate "Add Loot" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="post" action="{% url 'aapayout:loot_create' fleet.pk %}">
                    {% csrf_token %}
                    <input type="hidden" name="pricing_method" value="janice_buy">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="raw_loot_text" class="form-label">
                                {% translate "Loot from EVE" %} <span class="text-danger">*</span>
                            </label>
                            <textarea name="raw_loot_text" id="raw_loot_text" class="form-control font-monospace" rows="10" required placeholder="{% translate 'Paste loot from EVE inventory (Ctrl+C in inventory, then paste here)' %}"></textarea>
                            <small class="form-text text-muted">
                                <i class="fas fa-info-circle"></i> {% translate "Select items in your EVE inventory, press Ctrl+C, then paste here" %}
                            </small>
                        </div>

                        <div class="mb-3">
                            <label for="scout_bonus_percentage" class="form-label">
                                <i class="fas fa-binoculars"></i> {% translate "Scout Bonus" %}:
                                <strong><span id="scout-bonus-value-modal">10</span>%</strong>
                            </label>
                            <input type="range" class="form-range" id="scout_bonus_percentage" name="scout_bonus_percentage"
                                   min="0" max="100" step="10" value="10">
                            <div class="d-flex justify-content-between text-muted small">
                                <span>0%</span>
                                <span>50%</span>
                                <span>100%</span>
                            </div>
                            <small class="form-text text-muted">
                                <i class="fas fa-info-circle"></i> {% translate "Scouts receive additional ISK bonus on top of base share" %}
                            </small>
                        </div>

                        <div class="alert alert-info">
                            <h6><i class="fas fa-lightbulb"></i> {% translate "How Loot Valuation Works" %}</h6>
                            <ul class="small mb-0">
                                <li>{% translate "Items will be sent to Janice API for valuation" %}</li>
                                <li>{% translate "Prices based on Jita buy orders" %}</li>
                                <li>{% translate "You can manually adjust prices after" %}</li>
                                <li>{% translate "Payouts will be calculated automatically" %}</li>
                            </ul>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> {% translate "Create & Value Loot" %}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<script>
// Scout bonus slider for loot modal
document.addEventListener('DOMContentLoaded', function() {
    const scoutSliderModal = document.getElementById('scout_bonus_percentage');
    const scoutValueModal = document.getElementById('scout-bonus-value-modal');

    if (scoutSliderModal && scoutValueModal) {
        scoutSliderModal.addEventListener('input', function() {
            scoutValueModal.textContent = this.value;
        });
    }
});
</script>

{% endblock %}