{% extends "hangarready/base.html" %}
{% load static %}

{% block hangar_content %}
<!-- Stats Cards -->
<div class="row g-4 mb-4">
    <div class="col-md-6 col-lg-3">
        <div class="card text-white bg-primary h-100 stat-card">
            <div class="card-body py-5 px-4 text-center">
                <i class="fa-solid fa-user fa-3x opacity-50 mb-4 d-block"></i>
                <h6 class="card-subtitle mb-3 text-white-50 px-2">Tracked Characters</h6>
                <h2 class="asset-count mb-0 px-2">{{ total_characters }}</h2>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-3">
        <div class="card text-white bg-success h-100 stat-card">
            <div class="card-body py-5 px-4 text-center">
                <i class="fa-solid fa-rocket fa-3x opacity-50 mb-4 d-block"></i>
                <h6 class="card-subtitle mb-3 text-white-50 px-2">Ship Types</h6>
                <h2 class="asset-count mb-0 px-2">{{ total_ships }}</h2>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card h-100 action-card">
            <div class="card-body p-4">
                <h6 class="card-subtitle mb-3 text-muted">Quick Actions</h6>
                <div class="d-grid gap-2">
                    <div class="row g-2">
                        <div class="col-md-6">
                            <a href="{% url 'hangarready:characters' %}" class="btn btn-primary w-100">
                                <i class="fa-solid fa-user-gear me-2"></i>Manage Characters
                            </a>
                        </div>
                        <div class="col-md-6">
                            <a href="{% url 'hangarready:saved_searches' %}" class="btn btn-secondary w-100">
                                <i class="fa-solid fa-bookmark me-2"></i>Saved Reports
                            </a>
                        </div>
                        <div class="col-md-6">
                            <a href="{% url 'hangarready:ship_report' %}" class="btn btn-info w-100">
                                <i class="fa-solid fa-chart-bar me-2"></i>Ship Report
                            </a>
                        </div>
                        <div class="col-md-6">
                            <a href="{% url 'hangarready:update_all_characters' %}" class="btn btn-success w-100"
                               onclick="return confirm('This will update all your characters. Continue?');">
                                <i class="fa-solid fa-sync me-2"></i>Update Assets
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Search Section -->
<div class="row mb-4">
    <div class="col-lg-12">
        <div class="card search-card">
            <div class="card-header bg-transparent border-bottom">
                <h5 class="card-title mb-0">
                    <i class="fa-solid fa-magnifying-glass me-2"></i>Search Ships
                </h5>
            </div>
            <div class="card-body p-4">
                <form method="get" action="{% url 'hangarready:search' %}">
                    <div class="row g-3">
                        <div class="col-md-5">
                            <label for="type_id" class="form-label fw-semibold">Ship Type</label>
                            <select name="type_id" id="type_id" class="form-select form-select-lg">
                                <option value="">All Ships</option>
                                {% for ship in available_ships %}
                                <option value="{{ ship.type_id }}">
                                    {{ ship.type_name }} ({{ ship.count }})
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-5">
                            <label for="location_flag" class="form-label fw-semibold">Hangar Location</label>
                            <select name="location_flag" id="location_flag" class="form-select form-select-lg">
                                {% for flag_key, flag_name in hangar_flags.items %}
                                <option value="{{ flag_key }}" {% if flag_key == "HangarAll" %}selected{% endif %}>
                                    {{ flag_name }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary btn-lg w-100">
                                <i class="fa-solid fa-search me-2"></i>Search
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{% if available_ships %}
<div class="row mb-4">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header bg-transparent border-bottom">
                <h5 class="card-title mb-0">
                    <i class="fa-solid fa-rocket me-2"></i>Available Ships
                </h5>
            </div>
            <div class="card-body p-4">
                <div class="row g-3">
                    {% for ship in available_ships %}
                    <div class="col-md-4 col-lg-3">
                        <div class="ship-item">
                            <a href="{% url 'hangarready:search' %}?type_id={{ ship.type_id }}&location_flag=HangarAll"
                               class="text-decoration-none">
                                <div class="d-flex justify-content-between align-items-center p-3 border rounded hover-highlight">
                                    <span class="ship-name fw-semibold">{{ ship.type_name }}</span>
                                    <span class="badge bg-primary rounded-pill">{{ ship.count }}</span>
                                </div>
                            </a>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

{% if user_characters %}
<div class="row mb-4">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header bg-transparent border-bottom">
                <h5 class="card-title mb-0">
                    <i class="fa-solid fa-users me-2"></i>Your Tracked Characters
                </h5>
            </div>
            <div class="card-body p-4">
                <div class="table-responsive">
                    <table class="table table-striped table-hover align-middle">
                        <thead class="table-light">
                            <tr>
                                <th class="fw-semibold">Character</th>
                                <th class="fw-semibold">Corporation</th>
                                <th class="fw-semibold">Last Update</th>
                                <th class="fw-semibold">Status</th>
                                <th class="fw-semibold">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for char_asset in user_characters %}
                            <tr {% if char_asset.is_stale %}class="stale-data"{% endif %}>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://images.evetech.net/characters/{{ char_asset.character.character_id }}/portrait?size=32"
                                             class="rounded me-2" alt="{{ char_asset.character.character_name }}">
                                        <span class="fw-medium">{{ char_asset.character.character_name }}</span>
                                    </div>
                                </td>
                                <td>{{ char_asset.character.corporation_name }}</td>
                                <td>{{ char_asset.last_update|timesince }} ago</td>
                                <td>
                                    {% if char_asset.is_active %}
                                    <span class="badge bg-success rounded-pill">Active</span>
                                    {% else %}
                                    <span class="badge bg-secondary rounded-pill">Inactive</span>
                                    {% endif %}
                                    {% if char_asset.update_error %}
                                    <span class="badge bg-danger rounded-pill ms-1" title="{{ char_asset.update_error }}">Error</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <a href="{% url 'hangarready:update_character' char_asset.character.character_id %}"
                                       class="btn btn-sm btn-primary" title="Update Now">
                                        <i class="fa-solid fa-refresh me-1"></i>Update
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

{% if perms.hangarready.view_all_characters and all_characters %}
<div class="row mb-4">
    <div class="col-lg-12">
        <div class="card border-info">
            <div class="card-header bg-transparent border-bottom border-info">
                <h5 class="card-title mb-0">
                    <i class="fa-solid fa-crown me-2"></i>Admin: All Linked Characters
                    <span class="badge bg-info rounded-pill ms-2">{{ all_characters.count }}</span>
                </h5>
            </div>
            <div class="card-body p-4">
                <div class="table-responsive">
                    <table class="table table-striped table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="fw-semibold">Character</th>
                                <th class="fw-semibold">Corporation</th>
                                <th class="fw-semibold">Owner</th>
                                <th class="fw-semibold">Last Update</th>
                                <th class="fw-semibold">Status</th>
                                <th class="fw-semibold">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for char_asset in all_characters %}
                            <tr {% if char_asset.is_stale %}class="stale-data"{% endif %}>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://images.evetech.net/characters/{{ char_asset.character.character_id }}/portrait?size=32"
                                             class="rounded me-2" alt="{{ char_asset.character.character_name }}">
                                        <span class="fw-medium">{{ char_asset.character.character_name }}</span>
                                    </div>
                                </td>
                                <td>{{ char_asset.character.corporation_name }}</td>
                                <td>
                                    <span class="badge bg-secondary rounded-pill">
                                        {{ char_asset.token_character.user.username }}
                                    </span>
                                </td>
                                <td>{{ char_asset.last_update|timesince }} ago</td>
                                <td>
                                    {% if char_asset.is_active %}
                                    <span class="badge bg-success rounded-pill">Active</span>
                                    {% else %}
                                    <span class="badge bg-secondary rounded-pill">Inactive</span>
                                    {% endif %}
                                    {% if char_asset.update_error %}
                                    <span class="badge bg-danger rounded-pill ms-1" title="{{ char_asset.update_error }}">Error</span>
                                    {% endif %}
                                    {% if char_asset.is_stale %}
                                    <span class="badge bg-warning rounded-pill ms-1">Stale</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <a href="{% url 'hangarready:update_character' char_asset.character.character_id %}"
                                       class="btn btn-sm btn-primary" title="Update Now">
                                        <i class="fa-solid fa-refresh me-1"></i>Update
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}