{% load i18n %}

{% if model %}
<div class="card mb-3">
    <div class="card-header bg-light d-flex justify-content-between align-items-center">
        <h5 class="mb-0">{% if card_title %}{{ card_title }}{% else %}{% translate "Modèle" %}{% endif %}</h5>
        {% if can_edit_model %}
        <button type="button" class="btn btn-sm btn-outline-primary d-none" id="changeModelBtn" data-bs-toggle="modal" data-bs-target="#changeModelModal" data-edit-mode-only="true">
            <i class="bi bi-pencil me-1"></i>{% translate "Changer" %}
        </button>
        {% endif %}
    </div>
    <div class="card-body">
        <table class="table table-sm mb-0">
            <tbody>
                <tr>
                    <th style="width: 40%;">{% translate "Code" %}</th>
                    <td id="modelCodeDisplay">{{ model.code }}</td>
                </tr>
                <tr>
                    <th>{% translate "Nom" %}</th>
                    <td id="modelNameDisplay">{{ model.get_name }}</td>
                </tr>
                {% if model.brand %}
                <tr>
                    <th>{% translate "Marque" %}</th>
                    <td>{{ model.brand }}</td>
                </tr>
                {% endif %}
                {% if model.category %}
                <tr>
                    <th>{% translate "Catégorie" %}</th>
                    <td>{{ model.category }}</td>
                </tr>
                {% endif %}
                {% if model.description %}
                <tr>
                    <th>{% translate "Description" %}</th>
                    <td>{{ model.description }}</td>
                </tr>
                {% endif %}
                {% for field in model_specific_fields %}
                <tr>
                    <th>{{ field.label }}</th>
                    <td>{{ field.display_value }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{# Modal pour changer le modèle #}
{% if can_edit_model %}
<div class="modal fade" id="changeModelModal" tabindex="-1" aria-labelledby="changeModelModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="changeModelModalLabel">
                    <i class="bi bi-box me-2"></i>{% translate "Changer le modèle" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
            </div>
            <form id="changeModelForm">
                <div class="modal-body">
                    <div id="changeModelAlert" class="alert d-none" role="alert"></div>
                    
                    <p class="text-muted">
                        {% translate "Modèle actuel :" %} <strong>{{ model.code }} - {{ model.get_name }}</strong>
                    </p>
                    
                    <div class="mb-3">
                        <label for="changeModelCategory" class="form-label">
                            {% translate "Catégorie" %}
                        </label>
                        <select class="form-select" id="changeModelCategory" name="category_id">
                            <option value="">{% translate "Toutes les catégories" %}</option>
                            {% for cat in asset_categories %}
                            <option value="{{ cat.id }}" {% if cat.id == model.category_id %}selected{% endif %}>{{ cat.get_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="changeModelSelect" class="form-label">
                            {% translate "Nouveau modèle" %} <span class="text-danger">*</span>
                        </label>
                        <select class="form-select" id="changeModelSelect" name="model_id" required>
                            <option value="">{% translate "Sélectionner un modèle..." %}</option>
                            {% for m in asset_models %}
                            <option value="{{ m.id }}" {% if m.id == model.id %}selected{% endif %} data-category="{{ m.category_id }}">{{ m.code }} - {{ m.get_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        {% translate "Annuler" %}
                    </button>
                    <button type="submit" class="btn btn-primary" id="changeModelSubmit">
                        <i class="bi bi-check-circle me-1"></i>{% translate "Appliquer" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}

{% endif %}