{% extends 'buybackprogram/base.html' %}
{% load i18n %}
{% load humanize %}
{% load static %}
{% load program_settings %}

{% block extra_css %}
{% include "buybackprogram/bundles/buybackprogram-css-light.html" %}
{% endblock %}

{% block details %}

<div class="card mb-3">
    <div class="card-header d-flex align-items-center justify-content-between">
        <span><i class="fas fa-exchange-alt me-1"></i> {% trans "Reverse Buyback Programs" %}</span>
        <small class="text-muted">{{ programs|length }} {% trans "program(s)" %}</small>
    </div>

    {% for program in programs %}
    <div class="d-flex align-items-center px-3 py-3 {% if not forloop.last %}border-bottom{% endif %}">

        {# Left: name + manager #}
        <div class="flex-grow-1 me-3">
            <div class="fw-semibold">
                {% if program.name %}{{ program.name }}{% else %}<em class="text-muted">{% trans "Unnamed Program" %}</em>{% endif %}
            </div>
            <small class="text-muted">
                <i class="fas fa-user-tie me-1"></i>
                {% if program.is_corporation %}{{ program.owner.corporation }}{% else %}{{ program.owner.character.character }}{% endif %}
            </small>
        </div>

        {# Middle: locations #}
        <div class="me-4 d-none d-md-block" style="min-width:160px;">
            {% if program.location.all.count <= 4 %}
                {% for location in program.location.all %}
                    <div><span class="badge bg-secondary mb-1">{{ location.location_display_name }}</span></div>
                {% endfor %}
            {% else %}
                <button type="button" class="btn btn-sm btn-outline-secondary"
                        data-bs-toggle="modal" data-bs-target="#locationModal{{ program.id }}">
                    <i class="fas fa-map-marker-alt me-1"></i>{{ program.location.all.count }} {% trans "Locations" %}
                </button>
                <div class="modal fade" id="locationModal{{ program.id }}" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">{% trans "Accepted Locations:" %} {{ program.name }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body p-0">
                                <ul class="list-group list-group-flush">
                                    {% for location in program.location.all %}
                                    <li class="list-group-item">
                                        <i class="fas fa-building text-muted me-2"></i>{{ location.location_display_name }}
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{% trans "Close" %}</button>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>

        {# Markup badge #}
        <div class="me-4 d-none d-md-block text-center" style="min-width:60px;">
            <span class="badge {% if program.markup > 0 %}bg-warning text-dark{% elif program.markup < 0 %}bg-info text-dark{% else %}bg-light text-dark border{% endif %}">
                {{ program.markup }}%
            </span>
            <div><small class="text-muted">{% trans "Markup" %}</small></div>
        </div>

        {# Settings icons #}
        <div class="me-3 d-none d-lg-flex gap-1">
            {% for setting in program|reverse_program_setting %}
                <i style="color:{{ setting.color }};" class="fas {{ setting.icon }}" title="{{ setting.message }}"></i>
            {% endfor %}
        </div>

        {# Action buttons #}
        <div class="d-flex gap-1 flex-shrink-0">
            <a class="btn btn-success btn-sm" href="{% url 'buybackprogram:reverse_program_calculate' program_pk=program.id %}">
                {% trans "Buy" %}
            </a>

            {% if request.user.is_authenticated %}
                {% if perms.buybackprogram.manage_all_programs or perms.buybackprogram.manage_programs and program.owner.user == request.user %}
                    <a class="btn btn-sm btn-outline-warning" href="{% url 'buybackprogram:reverse_program_edit' program_pk=program.id %}" title="{% trans 'Edit' %}">
                        <i class="fas fa-edit"></i>
                    </a>
                    <a class="btn btn-sm btn-outline-danger" href="{% url 'buybackprogram:reverse_program_remove' program_pk=program.id %}" title="{% trans 'Delete' %}">
                        <i class="fas fa-trash"></i>
                    </a>
                {% endif %}
            {% endif %}
        </div>

    </div>
    {% empty %}
    <div class="p-4 text-center text-muted">
        <i class="fas fa-exchange-alt fa-2x mb-2 d-block"></i>
        {% trans "No reverse buyback programs available." %}
    </div>
    {% endfor %}

</div>

{% endblock %}