{% load i18n %}

{# Template réutilisable pour ajouter un nouvel équipement #}
{# Variables requises: #}
{# - modal_id: ID unique de la modale (default: 'addAssetModal') #}
{# - thematic_code: Code de la thématique #}
{# - categories: Liste des catégories disponibles #}
{# - locations: Liste des localisations disponibles (optionnel) #}
{# - intervention_id: ID de l'intervention (optionnel, pour le lien automatique) #}
{# - is_mobile: Boolean pour version mobile simplifiée #}

<div class="modal fade" id="{{ modal_id|default:'addAssetModal' }}" tabindex="-1" aria-labelledby="{{ modal_id|default:'addAssetModal' }}Label" aria-hidden="true">
    <div class="modal-dialog {% if is_mobile %}modal-fullscreen-sm-down{% else %}modal-lg{% endif %}">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="{{ modal_id|default:'addAssetModal' }}Label">
                    <i class="bi bi-plus-circle me-2"></i>{% translate "Ajouter un nouvel équipement" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
            </div>
            <form id="{{ modal_id|default:'addAssetModal' }}Form" class="add-asset-form" data-thematic="{{ thematic_code }}" {% if intervention_id %}data-intervention-id="{{ intervention_id }}"{% endif %}>
                {% csrf_token %}
                {% if intervention_id %}
                <input type="hidden" name="intervention_id" value="{{ intervention_id }}">
                {% endif %}
                {% if location %}
                <input type="hidden" name="location_id" value="{{ location.id }}">
                {% endif %}
                {% if structure %}
                <input type="hidden" name="structure_id" value="{{ structure.id }}">
                {% endif %}
                <input type="hidden" name="thematic_code" value="{{ thematic_code }}">
                
                <div class="modal-body">
                    <div id="{{ modal_id|default:'addAssetModal' }}Alert" class="alert d-none" role="alert"></div>
                    
                    {# Catégorie #}
                    <div class="mb-3">
                        <label for="{{ modal_id|default:'addAssetModal' }}Category" class="form-label">
                            <i class="bi bi-folder me-1"></i>{% translate "Catégorie" %} <span class="text-danger">*</span>
                        </label>
                        <select class="form-select asset-category-select" id="{{ modal_id|default:'addAssetModal' }}Category" name="category_id" required>
                            <option value="">{% translate "Sélectionner une catégorie..." %}</option>
                            {% for cat in categories %}
                            <option value="{{ cat.id }}">{{ cat.get_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    {# Type d'asset (dynamique) #}
                    <div class="mb-3 d-none" id="{{ modal_id|default:'addAssetModal' }}TypeContainer">
                        <label for="{{ modal_id|default:'addAssetModal' }}Type" class="form-label">
                            <i class="bi bi-tag me-1"></i>{% translate "Type d'équipement" %} <span class="text-danger">*</span>
                        </label>
                        <select class="form-select asset-type-select" id="{{ modal_id|default:'addAssetModal' }}Type" name="asset_type">
                            <option value="">{% translate "Sélectionner un type..." %}</option>
                        </select>
                    </div>
                    
                    {# Modèle #}
                    <div class="mb-3">
                        <label for="{{ modal_id|default:'addAssetModal' }}Model" class="form-label">
                            <i class="bi bi-box me-1"></i>{% translate "Modèle" %} <span class="text-danger" id="{{ modal_id|default:'addAssetModal' }}ModelRequiredStar" style="display: none;">*</span>
                        </label>
                        <select class="form-select asset-model-select" id="{{ modal_id|default:'addAssetModal' }}Model" name="model_id" disabled>
                            <option value="">{% translate "Sélectionner d'abord une catégorie..." %}</option>
                        </select>
                        <div class="form-text text-muted">
                            {% translate "Le modèle détermine les caractéristiques de l'équipement." %}
                        </div>
                    </div>
                    
                    {# Code #}
                    <div class="mb-3">
                        <label for="{{ modal_id|default:'addAssetModal' }}Code" class="form-label">
                            <i class="bi bi-hash me-1"></i>{% translate "Code" %} <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control asset-code-input" id="{{ modal_id|default:'addAssetModal' }}Code" name="code" required 
                               value="{{ suggested_code|default:'' }}" data-default-code="{{ suggested_code|default:'' }}"
                               placeholder="{% translate 'Ex: STR-001' %}" maxlength="50">
                        <div class="form-text text-muted">
                            {% translate "Code unique pour identifier l'équipement." %}
                        </div>
                    </div>
                    
                    {# Nom FR #}
                    <div class="mb-3">
                        <label for="{{ modal_id|default:'addAssetModal' }}NameFr" class="form-label">
                            <i class="bi bi-card-text me-1"></i>{% translate "Nom" %} (FR)
                        </label>
                        <input type="text" class="form-control" id="{{ modal_id|default:'addAssetModal' }}NameFr" name="name_fr" 
                               placeholder="{% translate 'Nom en français (optionnel)' %}" maxlength="200">
                    </div>
                    
                    {# Nom NL #}
                    <div class="mb-3">
                        <label for="{{ modal_id|default:'addAssetModal' }}NameNl" class="form-label">
                            <i class="bi bi-card-text me-1"></i>{% translate "Nom" %} (NL)
                        </label>
                        <input type="text" class="form-control" id="{{ modal_id|default:'addAssetModal' }}NameNl" name="name_nl" 
                               placeholder="{% translate 'Naam in het Nederlands (optioneel)' %}" maxlength="200">
                    </div>
                    
                    {# Localisation (optionnel) #}
                    {% if locations %}
                    <div class="mb-3">
                        <label for="{{ modal_id|default:'addAssetModal' }}Location" class="form-label">
                            <i class="bi bi-geo-alt me-1"></i>{% translate "Localisation" %}
                        </label>
                        <select class="form-select" id="{{ modal_id|default:'addAssetModal' }}Location" name="location_id">
                            <option value="">{% translate "Aucune localisation (optionnel)" %}</option>
                            {% for loc in locations %}
                            <option value="{{ loc.id }}" data-location-type="{{ loc.location_type|default:'structurelocation' }}">{{ loc.code }} - {{ loc.get_name }}</option>
                            {% endfor %}
                        </select>
                        <div class="form-text text-muted">
                            {% translate "Associez l'équipement à une localisation spécifique." %}
                        </div>
                    </div>
                    {% endif %}
                    
                    {# Structure (pour la thématique structures) #}
                    {% if structures %}
                    <div class="mb-3">
                        <label for="{{ modal_id|default:'addAssetModal' }}Structure" class="form-label">
                            <i class="bi bi-building me-1"></i>{% translate "Ouvrage" %}
                        </label>
                        <select class="form-select" id="{{ modal_id|default:'addAssetModal' }}Structure" name="structure_id">
                            <option value="">{% translate "Aucun ouvrage (optionnel)" %}</option>
                            {% for struct in structures %}
                            <option value="{{ struct.id }}">{{ struct.code }} - {{ struct.get_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    {% endif %}
                    
                    <div class="alert alert-info small">
                        <i class="bi bi-info-circle me-1"></i>
                        {% translate "L'équipement sera créé avec le statut 'À approuver'." %}
                    </div>
                </div>
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-lg me-1"></i>{% translate "Annuler" %}
                    </button>
                    <button type="submit" class="btn btn-primary" id="{{ modal_id|default:'addAssetModal' }}Submit">
                        <i class="bi bi-plus-circle me-1"></i>{% translate "Créer l'équipement" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>