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

{% block page_title %}Hangar Ready{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">
                <i class="fa-solid fa-warehouse"></i> Hangar Ready
                {% block page_subtitle %}{% endblock %}
            </h1>
        </div>
    </div>

    {% if messages %}
    <div class="row">
        <div class="col-lg-12">
            {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message|safe }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {% block hangar_content %}{% endblock %}
</div>
{% endblock %}

{% block extra_css %}
<style>
    /* CSS Variables for Light/Dark Mode */
    :root {
        --hangar-bg-primary: #ffffff;
        --hangar-bg-secondary: #f8f9fa;
        --hangar-bg-hover: #e9ecef;
        --hangar-text-primary: #212529;
        --hangar-text-secondary: #6c757d;
        --hangar-border: #dee2e6;
        --hangar-shadow: rgba(0, 0, 0, 0.1);
        --hangar-shadow-hover: rgba(0, 0, 0, 0.15);
    }

    /* Dark mode - Alliance Auth uses data-bs-theme or .theme-dark */
    [data-bs-theme="dark"],
    html[data-bs-theme="dark"],
    body.theme-dark,
    .theme-dark {
        --hangar-bg-primary: #212529;
        --hangar-bg-secondary: #2c3034;
        --hangar-bg-hover: #343a40;
        --hangar-text-primary: #dee2e6;
        --hangar-text-secondary: #adb5bd;
        --hangar-border: #495057;
        --hangar-shadow: rgba(0, 0, 0, 0.3);
        --hangar-shadow-hover: rgba(0, 0, 0, 0.5);
    }

    /* Also support prefers-color-scheme */
    @media (prefers-color-scheme: dark) {
        :root:not([data-bs-theme="light"]) {
            --hangar-bg-primary: #212529;
            --hangar-bg-secondary: #2c3034;
            --hangar-bg-hover: #343a40;
            --hangar-text-primary: #dee2e6;
            --hangar-text-secondary: #adb5bd;
            --hangar-border: #495057;
            --hangar-shadow: rgba(0, 0, 0, 0.3);
            --hangar-shadow-hover: rgba(0, 0, 0, 0.5);
        }
    }

    /* Ship cards */
    .ship-card {
        transition: all 0.3s ease;
        background-color: var(--hangar-bg-primary);
        border-color: var(--hangar-border);
    }
    .ship-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px var(--hangar-shadow-hover);
    }

    /* Character badges */
    .character-badge {
        font-size: 0.9em;
    }

    /* Stale data indicator */
    .stale-data {
        opacity: 0.7;
    }

    /* Asset count */
    .asset-count {
        font-size: 1.2em;
        font-weight: bold;
    }

    /* Ship list items */
    .ship-item .hover-highlight {
        transition: all 0.2s ease-in-out;
        background-color: var(--hangar-bg-primary);
        border-color: var(--hangar-border);
        cursor: pointer;
    }
    .ship-item .hover-highlight:hover {
        background-color: var(--hangar-bg-hover);
        box-shadow: 0 2px 8px var(--hangar-shadow-hover);
        transform: translateY(-2px);
    }
    .ship-item .ship-name {
        color: var(--hangar-text-primary);
        font-weight: 500;
    }
    .ship-item a {
        text-decoration: none;
    }
    .ship-item a:hover .ship-name {
        color: #0d6efd;
    }

    /* Structure fetch button styling */
    .fetch-structure-btn {
        color: var(--hangar-text-secondary, #6c757d);
        text-decoration: none;
        padding: 0.1rem 0.3rem;
        transition: all 0.2s ease;
    }
    .fetch-structure-btn:hover {
        color: #0d6efd;
    }
    .fetch-structure-btn:disabled {
        opacity: 0.5;
        cursor: wait;
    }
    .fetch-structure-btn i {
        font-size: 0.875rem;
    }

    [data-bs-theme="dark"] .fetch-structure-btn,
    body.theme-dark .fetch-structure-btn {
        color: var(--hangar-text-secondary, #adb5bd);
    }

    [data-bs-theme="dark"] .fetch-structure-btn:hover,
    body.theme-dark .fetch-structure-btn:hover {
        color: #0dcaf0;
    }

    /* Card styling for dark mode */
    [data-bs-theme="dark"] .card,
    body.theme-dark .card {
        background-color: var(--hangar-bg-secondary);
        border-color: var(--hangar-border);
    }

    /* Table styling for dark mode */
    [data-bs-theme="dark"] .table,
    body.theme-dark .table {
        color: var(--hangar-text-primary);
    }

    [data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *,
    body.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > * {
        background-color: var(--hangar-bg-hover);
    }

    /* Form controls for dark mode - Enhanced with higher specificity */
    [data-bs-theme="dark"] .form-select,
    [data-bs-theme="dark"] .form-control,
    html[data-bs-theme="dark"] .form-select,
    html[data-bs-theme="dark"] .form-control,
    body.theme-dark .form-select,
    body.theme-dark .form-control,
    .dark-mode .form-select,
    .dark-mode .form-control {
        background-color: #2c3034 !important;
        border-color: #495057 !important;
        color: #dee2e6 !important;
    }

    [data-bs-theme="dark"] .form-select:focus,
    [data-bs-theme="dark"] .form-control:focus,
    html[data-bs-theme="dark"] .form-select:focus,
    html[data-bs-theme="dark"] .form-control:focus,
    body.theme-dark .form-select:focus,
    body.theme-dark .form-control:focus,
    .dark-mode .form-select:focus,
    .dark-mode .form-control:focus {
        background-color: #212529 !important;
        border-color: #0d6efd !important;
        color: #dee2e6 !important;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    }

    /* Dark mode select options with higher specificity */
    [data-bs-theme="dark"] .form-select option,
    html[data-bs-theme="dark"] .form-select option,
    body.theme-dark .form-select option,
    .dark-mode .form-select option {
        background-color: #2c3034 !important;
        color: #dee2e6 !important;
    }

    [data-bs-theme="dark"] .form-select option:hover,
    html[data-bs-theme="dark"] .form-select option:hover,
    body.theme-dark .form-select option:hover,
    .dark-mode .form-select option:hover {
        background-color: #343a40 !important;
    }

    /* Form labels in dark mode */
    [data-bs-theme="dark"] .form-label,
    html[data-bs-theme="dark"] .form-label,
    body.theme-dark .form-label,
    .dark-mode .form-label {
        color: #dee2e6 !important;
    }

    /* Prefers color scheme dark */
    @media (prefers-color-scheme: dark) {
        .form-select,
        .form-control {
            background-color: #2c3034 !important;
            border-color: #495057 !important;
            color: #dee2e6 !important;
        }

        .form-select option,
        .form-control option {
            background-color: #2c3034 !important;
            color: #dee2e6 !important;
        }

        .form-label {
            color: #dee2e6 !important;
        }
    }

    /* Alert styling for dark mode */
    [data-bs-theme="dark"] .alert-warning,
    body.theme-dark .alert-warning {
        background-color: #664d03;
        border-color: #997404;
        color: #ffecb5;
    }

    /* Badge styling for better visibility in dark mode */
    [data-bs-theme="dark"] .badge.bg-primary,
    body.theme-dark .badge.bg-primary {
        background-color: #0d6efd !important;
    }

    [data-bs-theme="dark"] .badge.bg-info,
    body.theme-dark .badge.bg-info {
        background-color: #0dcaf0 !important;
        color: #000 !important;
    }

    [data-bs-theme="dark"] .badge.bg-success,
    body.theme-dark .badge.bg-success {
        background-color: #198754 !important;
    }

    /* Page header styling */
    [data-bs-theme="dark"] .page-header,
    body.theme-dark .page-header {
        color: var(--hangar-text-primary);
        border-bottom-color: var(--hangar-border);
    }

    /* Dashboard stat cards */
    .stat-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: default;
    }
    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 16px var(--hangar-shadow-hover);
    }
    .stat-card .asset-count {
        font-size: 2.5rem;
        font-weight: 700;
        line-height: 1.2;
    }

    /* Action card buttons */
    .action-card .btn {
        transition: all 0.2s ease;
        font-weight: 500;
    }
    .action-card .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    /* Search card */
    .search-card {
        border: 2px solid var(--hangar-border);
        transition: border-color 0.3s ease;
    }
    .search-card:hover {
        border-color: #0d6efd;
    }

    /* Table enhancements */
    .table-hover tbody tr {
        transition: all 0.2s ease;
    }
    .table-hover tbody tr:hover {
        background-color: var(--hangar-bg-hover);
        transform: scale(1.01);
        box-shadow: 0 2px 4px var(--hangar-shadow);
    }
    .table thead.table-light th {
        background-color: var(--hangar-bg-secondary);
        border-bottom: 2px solid var(--hangar-border);
        padding: 1rem 0.75rem;
    }

    /* Card header improvements */
    .card-header.bg-transparent {
        background-color: transparent !important;
        padding: 1.25rem 1.5rem;
    }
    .card-header .card-title {
        font-weight: 600;
        margin-bottom: 0;
    }

    /* Badge enhancements */
    .badge.rounded-pill {
        padding: 0.35em 0.65em;
        font-weight: 600;
    }

    /* Dark mode table header */
    [data-bs-theme="dark"] .table thead.table-light th,
    body.theme-dark .table thead.table-light th {
        background-color: var(--hangar-bg-hover);
        color: var(--hangar-text-primary);
    }

    /* Admin section styling */
    .card.border-info {
        border-width: 2px;
        box-shadow: 0 2px 8px rgba(13, 202, 240, 0.15);
    }
    .card.border-info .card-header {
        background: linear-gradient(135deg, rgba(13, 202, 240, 0.1) 0%, transparent 100%);
    }
    [data-bs-theme="dark"] .card.border-info,
    body.theme-dark .card.border-info {
        box-shadow: 0 2px 8px rgba(13, 202, 240, 0.25);
    }

    /* Print styles - keep light */
    @media print {
        .btn, .card-header button, form {
            display: none !important;
        }
        .card {
            border: none !important;
            box-shadow: none !important;
            background-color: #fff !important;
            color: #000 !important;
        }
        .table {
            color: #000 !important;
        }
    }
</style>

{% block extra_script %}{% endblock %}
{% endblock %}