{% extends "mobile/mobile_base.html" %}
{% load static %}
{% load i18n %}

{% block extra_head %}
<style>
    .thematic-card {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.25rem;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        text-decoration: none;
        color: inherit;
        background-color: #fff;
        transition: background-color 0.15s ease, border-color 0.15s ease;
        margin-bottom: 0.75rem;
    }
    .thematic-card:hover,
    .thematic-card:focus {
        background-color: #f0f4ff;
        border-color: #0d6efd;
        color: inherit;
        text-decoration: none;
    }
    .thematic-icon {
        font-size: 1.75rem;
        width: 2.5rem;
        text-align: center;
        flex-shrink: 0;
    }
    .thematic-name {
        font-weight: 600;
        font-size: 1rem;
    }
    .thematic-chevron {
        margin-left: auto;
        color: #adb5bd;
    }
    .step-badge {
        font-size: 0.7rem;
        font-weight: 600;
        padding: 0.15rem 0.4rem;
        border-radius: 0.25rem;
        background-color: #e9ecef;
        color: #6c757d;
        vertical-align: middle;
    }
</style>
{% endblock extra_head %}

{% block title %}
    {% translate "Choisir une thématique" %}
{% endblock title %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex align-items-center mb-3">
        <a href="{% url 'mobile:choose_maintain_type_for_intervention_mobile' %}" class="btn btn-outline-secondary btn-sm me-2">
            <i class="bi bi-arrow-left"></i>
        </a>
        <div>
            <h5 class="mb-0">{% translate "Nouvelle intervention" %}</h5>
            <small class="text-muted">
                {% if maintain_type == 'ameliorative' %}
                    <i class="bi bi-arrow-up-circle text-success me-1"></i>{% translate "Améliorative" %}
                {% else %}
                    <i class="bi bi-tools text-danger me-1"></i>{% translate "Corrective" %}
                {% endif %}
            </small>
        </div>
    </div>

    <p class="text-muted mb-3">{% translate "Sélectionnez la thématique :" %}</p>

    {% for thematic in thematics %}
    <a href="{% url 'mobile:intervention_add_mobile_form' thematic_code=thematic.code %}?maintain_type={{ maintain_type }}"
       class="thematic-card">
        {% if thematic.icon %}
        <span class="thematic-icon" style="color: {{ thematic.color }};">
            <i class="bi {{ thematic.icon }}"></i>
        </span>
        {% else %}
        <span class="thematic-icon" style="color: {{ thematic.color }};">
            <i class="bi bi-tag"></i>
        </span>
        {% endif %}
        <span class="thematic-name">{{ thematic.name }}</span>
        <i class="bi bi-chevron-right thematic-chevron"></i>
    </a>
    {% endfor %}
</div>
{% endblock content %}