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

{% block page_title %}{% trans "Indy Hub" %}{% endblock page_title %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'indy_hub/css/index.css' %}">
{% endblock extra_css %}

{% block content %}
<div class="container-fluid my-4">
    <div id="indy-hub-popup" class="alert alert-info d-none position-fixed top-0 start-50 translate-middle-x mt-3" style="z-index: 2000; min-width: 300px; max-width: 90vw; text-align: center;"></div>
    <!-- Hero Section -->
    <div class="hero-section">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h1 class="display-5 fw-bold mb-3">
                    <i class="fas fa-industry me-3"></i>
                    {% trans "Welcome to Indy Hub" %}
                </h1>
                <p class="lead mb-4">
                    {% trans "Your comprehensive EVE Online industrial management dashboard. Track blueprints, monitor jobs, and optimize your manufacturing operations." %}
                </p>
                {% if not has_blueprint_tokens or not has_jobs_tokens %}
                <div class="alert alert-warning bg-white bg-opacity-10 border-0 text-white">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    {% trans "Complete your ESI setup to unlock all features" %}
                </div>
                {% endif %}
            </div>
            <div class="col-lg-4">
                <div class="quick-stats">
                    <h5 class="mb-3">{% trans "Quick Stats" %}</h5>
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="text-center">
                                <div class="h4 mb-1">{{ blueprint_count|default:0 }}</div>
                                <small>{% trans "Blueprints" %}</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center">
                                <div class="h4 mb-1">{{ active_jobs_count|default:0 }}</div>
                                <small>{% trans "Active Jobs" %}</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center">
                                <div class="h4 mb-1">{{ blueprint_token_count|default:0 }}</div>
                                <small>{% trans "Characters" %}</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center">
                                <div class="h4 mb-1">{{ completed_jobs_count|default:0 }}</div>
                                <small>{% trans "Completed" %}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Dashboard Cards -->
    <div class="row g-4 mb-5">
        <!-- Blueprints Card -->
        <div class="col-lg-6 col-md-6">
            <div class="card dashboard-card h-100">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-3">
                        <div class="stat-icon bg-primary bg-opacity-10 text-primary me-3">
                            <i class="fas fa-scroll"></i>
                        </div>
                        <div>
                            <h5 class="card-title mb-1">{% trans "Blueprint Library" %}</h5>
                            <p class="text-muted small mb-0">{% trans "Manage your blueprints and research" %}</p>
                        </div>
                    </div>
                    {% if has_blueprint_tokens %}
                    <div class="row g-3 mb-4">
                        <div class="col-4">
                            <div class="text-center">
                                <div class="h4 text-success mb-1">{{ original_blueprints|default:0 }}</div>
                                <small class="text-muted">{% trans "Originals" %}</small>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="text-center">
                                <div class="h4 text-info mb-1">{{ copy_blueprints|default:0 }}</div>
                                <small class="text-muted">{% trans "Copies" %}</small>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="text-center">
                                <div class="h4 text-warning mb-1">{{ stack_blueprints|default:0 }}</div>
                                <small class="text-muted">{% trans "Stacks" %}</small>
                            </div>
                        </div>
                    </div>
                    <div class="d-grid gap-2">
                        <a href="{% url 'indy_hub:personnal_bp_list' %}" class="btn btn-primary">
                            <i class="fas fa-list me-2"></i>{% trans "View My Blueprints" %}
                        </a>
                    </div>
                    {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-exclamation-triangle text-warning fa-3x mb-3"></i>
                        <h6 class="text-muted mb-3">{% trans "Blueprint access not configured" %}</h6>
                        <a href="{% url 'indy_hub:token_management' %}" class="btn btn-warning">
                            <i class="fas fa-key me-2"></i>{% trans "Setup Access" %}
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Industry Jobs Card -->
        <div class="col-lg-6 col-md-6">
            <div class="card dashboard-card h-100">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-3">
                        <div class="stat-icon bg-success bg-opacity-10 text-success me-3">
                            <i class="fas fa-industry"></i>
                        </div>
                        <div>
                            <h5 class="card-title mb-1">{% trans "Industry Jobs" %}</h5>
                            <p class="text-muted small mb-0">{% trans "Monitor manufacturing and research" %}</p>
                        </div>
                    </div>

                    {% if has_jobs_tokens %}
                    <div class="row g-3 mb-4">
                        <div class="col-4">
                            <div class="text-center">
                                <div class="h4 text-warning mb-1">{{ active_jobs_count|default:0 }}</div>
                                <small class="text-muted">{% trans "Active" %}</small>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="text-center">
                                <div class="h4 text-success mb-1">{{ completed_jobs_count|default:0 }}</div>
                                <small class="text-muted">{% trans "Completed" %}</small>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="text-center">
                                <div class="h4 text-primary mb-1">{{ jobs_token_count }}</div>
                                <small class="text-muted">{% trans "Characters" %}</small>
                            </div>
                        </div>
                    </div>
                    <div class="d-grid gap-2 mb-3">
                        <a href="{% url 'indy_hub:personnal_job_list' %}" class="btn btn-success">
                            <i class="fas fa-list me-2"></i>{% trans "View All Jobs" %}
                        </a>
                    </div>
                    <div class="mb-3 d-flex gap-2">
                        <button id="toggle-job-notify" class="btn {% if jobs_notify_completed %}btn-success{% else %}btn-outline-secondary{% endif %} flex-fill" type="button" data-enabled="{{ jobs_notify_completed|yesno:'true,false' }}">
                            <i class="fas fa-bell me-1"></i>
                            <span id="notify-label">{% if jobs_notify_completed %}{% trans "Notifications ON" %}{% else %}{% trans "Notifications OFF" %}{% endif %}</span>
                        </button>
                    </div>
                    {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-exclamation-triangle text-warning fa-3x mb-3"></i>
                        <h6 class="text-muted mb-3">{% trans "Industry jobs access not configured" %}</h6>
                        <a href="{% url 'indy_hub:token_management' %}" class="btn btn-warning">
                            <i class="fas fa-key me-2"></i>{% trans "Setup Access" %}
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- All EVE Blueprints Card -->
        <div class="col-lg-6 col-md-6">
            <div class="card dashboard-card h-100">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-3">
                        <div class="stat-icon bg-info bg-opacity-10 text-info me-3">
                            <i class="fas fa-database"></i>
                        </div>
                        <div>
                            <h5 class="card-title mb-1">{% trans "All EVE Blueprints" %}</h5>
                            <p class="text-muted small mb-0">{% trans "Browse the full reference of all blueprints in EVE Online." %}</p>
                        </div>
                    </div>
                    <div class="d-grid gap-2">
                        <a href="{% url 'indy_hub:all_bp_list' %}" class="btn btn-outline-info">
                            <i class="fas fa-list me-2"></i>{% trans "View All EVE Blueprints" %}
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Blueprint Copy Sharing Card -->
        <div class="col-lg-6 col-md-6">
            <div class="card dashboard-card h-100">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-3">
                        <div class="stat-icon bg-warning bg-opacity-10 text-warning me-3">
                            <i class="fas fa-copy"></i>
                        </div>
                        <div>
                            <h5 class="card-title mb-1">{% trans "Blueprint Copy Sharing" %}</h5>
                            <p class="text-muted small mb-0">{% trans "Request copies from the community or share your own originals." %}</p>
                        </div>
                    </div>
                    <div class="mb-3 d-flex gap-2">
                        <button id="toggle-copy-sharing" class="btn {% if allow_copy_requests %}btn-success{% else %}btn-outline-secondary{% endif %} flex-fill" data-enabled="{{ allow_copy_requests|yesno:'true,false' }}">
                            <i class="fas fa-share-alt me-1"></i>
                            <span id="copy-sharing-label">{% if allow_copy_requests %}{% trans "Sharing ON" %}{% else %}{% trans "Sharing OFF" %}{% endif %}</span>
                        </button>
                    </div>
                    <div class="d-grid gap-2">
                        <a href="{% url 'indy_hub:bp_copy_request_page' %}" class="btn btn-warning">
                            <i class="fas fa-copy me-2"></i>{% trans "Request a Copy" %}
                        </a>
                        <a href="{% url 'indy_hub:bp_copy_fulfill_requests' %}" class="btn btn-outline-success">
                            <i class="fas fa-handshake me-2"></i>{% trans "Fulfill Requests" %}
                        </a>
                        <a href="{% url 'indy_hub:bp_copy_my_requests' %}" class="btn btn-outline-primary">
                            <i class="fas fa-list me-2"></i>{% trans "My Requests" %}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Dashboard Cards -->

    <!-- ESI Token Quick Status & Management Link -->
    <div class="row mb-4">
        <div class="col-lg-6 mx-auto">
            <div class="card border-info shadow-sm">
                <div class="card-body d-flex align-items-center justify-content-between">
                    <div>
                        <div class="fw-bold mb-1">
                            <i class="fas fa-key text-info me-2"></i>{% trans "ESI Access" %}
                        </div>
                        <div class="small text-muted">
                            {% if has_blueprint_tokens %}
                                <span class="me-2"><i class="fas fa-scroll text-success me-1"></i>{{ blueprint_token_count }} {% trans "blueprint" %}</span>
                            {% else %}
                                <span class="me-2"><i class="fas fa-scroll text-danger me-1"></i>{% trans "No blueprint access" %}</span>
                            {% endif %}
                            |
                            {% if has_jobs_tokens %}
                                <span class="ms-2"><i class="fas fa-industry text-success me-1"></i>{{ jobs_token_count }} {% trans "jobs" %}</span>
                            {% else %}
                                <span class="ms-2"><i class="fas fa-industry text-danger me-1"></i>{% trans "No jobs access" %}</span>
                            {% endif %}
                        </div>
                    </div>
                    <a href="{% url 'indy_hub:token_management' %}" class="btn btn-outline-info ms-3">
                        <i class="fas fa-cog me-1"></i>{% trans "Manage ESI" %}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Dashboard Footer -->
    <footer class="mt-5 pt-4 border-top text-center text-muted small">
        <div class="container">
            <span>Indy Hub &copy; {{ year|default:2025 }} &mdash; Powered by Alliance Auth</span>
            <span class="mx-2">|</span>
            <a href="https://github.com/Erkaek/aa-Indy_Hub" target="_blank" class="text-muted">GitHub</a>
        </div>
    </footer>
</div>

{% block extra_javascript %}
<script src="{% static 'indy_hub/js/index.js' %}"></script>
<script>
// Configure URLs and text for the JavaScript module
window.csrfToken = '{{ csrf_token }}';
window.toggleJobNotificationsUrl = '{% url 'indy_hub:toggle_job_notifications' %}';
window.toggleCopySharingUrl = '{% url 'indy_hub:toggle_copy_sharing' %}';
window.notificationsOnText = '{% trans "Notifications ON" %}';
window.notificationsOffText = '{% trans "Notifications OFF" %}';
window.sharingOnText = '{% trans "Sharing ON" %}';
window.sharingOffText = '{% trans "Sharing OFF" %}';
</script>
{% endblock extra_javascript %}
{% endblock %}