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

{% block page_title %}{% trans "Industry Jobs" %}{% endblock page_title %}

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

{% block content %}
<div class="container-fluid my-4">
    <div class="page-header mb-4">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div>
                <h1 class="h2 mb-1">
                    <i class="fas fa-industry me-2"></i>
                    {% trans "Industry Jobs" %}
                </h1>
                <p class="description">{% trans "Track your industry jobs and progress in real time" %}</p>
            </div>
            <div class="d-flex gap-2">
                <a href="{% url 'indy_hub:index' %}" class="btn btn-outline-light">
                    <i class="fas fa-arrow-left me-1"></i>{% trans "Back to Dashboard" %}
                </a>
                <button type="button" class="btn btn-light text-primary" onclick="location.href='?refresh=1'">
                    <i class="fas fa-sync-alt me-1"></i>{% trans "Refresh Data" %}
                </button>
            </div>
        </div>
        <i class="fas fa-cogs header-bg"></i>
    </div>

    <!-- Filter Section -->
    <div class="filter-section mb-4">
        <form method="get">
            <div class="row g-3 align-items-end">
                <div class="col-lg-3">
                    <label class="form-label text-muted fw-bold">{% trans 'Search' %}</label>
                    <input type="text" name="search" value="{{ current_filters.search }}" class="form-control"
                        id="jobSearch" placeholder="{% trans 'Job, blueprint, character...' %}">
                </div>
                <div class="col-lg-2">
                    <label class="form-label text-muted fw-bold">{% trans 'Status' %}</label>
                    <select name="status" class="form-select" id="statusFilter">
                        <option value="">{% trans 'All Status' %}</option>
                        {% for s in statuses %}
                        <option value="{{ s }}" {% if current_filters.status == s %}selected{% endif %}>{{ s|title }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-lg-2">
                    <label class="form-label text-muted fw-bold">{% trans 'Activity' %}</label>
                    <select name="activity" class="form-select" id="activityFilter">
                        <option value="">{% trans 'All Activities' %}</option>
                        {% for aid,name in activities %}
                        <option value="{{ aid }}" {% if current_filters.activity == aid %}selected{% endif %}>{{ name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-lg-3">
                    <label class="form-label text-muted fw-bold">{% trans 'Character' %}</label>
                    <select name="character" class="form-select" id="characterFilter">
                        <option value="">{% trans 'All Characters' %}</option>
                        {% for cid in character_ids %}
                        <option value="{{ cid }}" {% if current_filters.character|stringformat:'s' == cid|stringformat:'s' %}selected{% endif %}>
                            {% with name=character_map|dict_get:cid %}{{ name|default_if_none:cid }}{% endwith %}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-lg-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-filter me-1"></i>{% trans 'Apply Filters' %}
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Stats Summary -->
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="stats-card">
                <div class="card-body text-center">
                    <div class="h3 text-info mb-1">{{ statistics.total|default:0 }}</div>
                    <small class="text-muted fw-bold">{% trans 'Total Jobs' %}</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card">
                <div class="card-body text-center">
                    <div class="h3 text-warning mb-1">{{ statistics.active|default:0 }}</div>
                    <small class="text-muted fw-bold">{% trans 'Active Jobs' %}</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card">
                <div class="card-body text-center">
                    <div class="h3 text-success mb-1">{{ statistics.completed|default:0 }}</div>
                    <small class="text-muted fw-bold">{% trans 'Completed' %}</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card">
                <div class="card-body text-center">
                    <div class="h3 text-secondary mb-1">{{ character_ids|length }}</div>
                    <small class="text-muted fw-bold">{% trans 'Characters' %}</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Jobs List Display as cards -->
    <div class="row g-4" id="jobsContainer">
        {% for job in jobs %}
        <div class="col-md-6 col-lg-4">
            <div class="card h-100 bg-body border">
                <div class="card-body d-flex flex-column">
                    <div class="d-flex align-items-center mb-3">
                        <img src="{{ job.icon_url }}" alt="{{ job.blueprint_type_name }}" class="rounded"
                            style="width:48px;height:48px;object-fit:cover;" loading="lazy"
                            onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" />
                        <span class="fallback fs-3 text-secondary" style="display:none;"><i class="fas fa-industry"></i>
                        </span>
                        <div class="ms-3">
                            <h5 class="card-title mb-1 text-truncate">
                                {{ job.blueprint_type_name|default:job.blueprint_type_id }}</h5>
                            {% with name=character_map|dict_get:job.character_id %}
                            <small class="text-muted">{{ name|default:job.character_id }}</small>
                            {% endwith %}
                        </div>
                    </div>
                    <div class="mb-3">
                        <!-- Activity Badge -->
                        {% if job.activity_id == 1 %}<span class="activity-badge activity-1 me-2">Mfg</span>
                        {% elif job.activity_id == 3 %}<span class="activity-badge activity-3 me-2">TE</span>
                        {% elif job.activity_id == 4 %}<span class="activity-badge activity-4 me-2">ME</span>
                        {% elif job.activity_id == 5 %}<span class="activity-badge activity-5 me-2">Copy</span>
                        {% elif job.activity_id == 8 %}<span class="activity-badge activity-8 me-2">Inv</span>
                        {% elif job.activity_id == 9 %}<span class="activity-badge activity-9 me-2">Rx</span>
                        {% else %}<span class="activity-badge me-2">{{ job.activity_id }}</span>{% endif %}
                        <!-- Runs and Status -->
                        <span class="runs-badge me-2">{{ job.runs }} {% trans 'runs' %}</span>
                        {% if job.is_completed %}
                        <span class="status-badge status-{{ job.status|lower }} rounded-pill px-3 py-1">{% trans "Completed" %}</span>
                        {% elif job.is_active %}
                        <span class="status-badge status-active rounded-pill px-3 py-1">{% trans "Active" %}</span>
                        {% else %}
                        <span class="status-badge status-{{ job.status|lower }} rounded-pill px-3 py-1">{{ job.status|title }}</span>
                        {% endif %}
                    </div>
                    <div class="mb-3">
                        <!-- Progress Bar -->
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                                style="width: {{ job.progress_percent|default:0 }}%;" aria-valuenow="{{ job.progress_percent|default:0 }}"
                                aria-valuemin="0" aria-valuemax="100">
                                {{ job.progress_percent|default:0 }}%
                            </div>
                        </div>
                        <small class="text-muted">ETA: {{ job.display_eta|default:'--:--:--' }}</small>
                    </div>
                </div>
                <div class="card-footer bg-transparent border-0 d-flex justify-content-between">
                    <small class="text-muted">Start: {{ job.start_date|date:"Y-m-d H:i" }}</small>
                    <small class="text-muted">{% if job.is_completed %}Completed: {{ job.end_date|date:"Y-m-d H:i" }}{% else %}Ends: {{ job.end_date|date:"Y-m-d H:i" }}{% endif %}</small>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12 text-center text-muted py-4">{% trans "No industry jobs found." %}</div>
        {% endfor %}
    </div>
</div>
{% endblock content %}

{% block extra_javascript %}
<script src="{% static 'indy_hub/js/jobs.js' %}"></script>
<script src="{% static 'indy_hub/js/personal_job_list.js' %}"></script>
{% endblock extra_javascript %}