{% extends 'dashboard/base.html.twig' %}

{% block title %}{{ 'templates.page_title'|trans({}, 'dashboard') }}{% endblock %}

{% block dashboard_content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2">
                    <i class="bi bi-clipboard me-2"></i>
                    {{ 'templates.title'|trans({}, 'dashboard') }}
                </h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <button type="button" class="btn btn-primary" onclick="window.location.href='{{ path('app_dashboard_items_new') }}?create_template=1'">
                        <i class="bi bi-plus-circle me-1"></i>
                        {{ 'templates.actions.new_template'|trans({}, 'dashboard') }}
                    </button>
                </div>
            </div>

            <div class="alert alert-info" role="alert">
                <i class="bi bi-info-circle me-2"></i>
                <strong>{{ 'templates.title'|trans({}, 'dashboard') }} :</strong> {{ 'templates.info.description'|trans({}, 'dashboard') }}
            </div>

            <!-- Liste des templates -->
            {% if templates %}
                <div class="row">
                    {% for template in templates %}
                        <div class="col-md-6 col-xl-4 mb-4">
                            <div class="card h-100">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0">{{ template.name }}</h6>
                                    <div class="dropdown">
                                        <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="dropdown">
                                            <i class="bi bi-three-dots-vertical"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a class="dropdown-item" href="#" onclick="useTemplate({{ template.id }})">
                                                    <i class="bi bi-play-circle me-2"></i>{{ 'templates.actions.use_template'|trans({}, 'dashboard') }}
                                                </a>
                                            </li>
                                            <li><hr class="dropdown-divider"></li>
                                            <li>
                                                <a class="dropdown-item" href="#" onclick="editTemplate({{ template.id }})">
                                                    <i class="bi bi-pencil me-2"></i>{{ 'templates.actions.edit'|trans({}, 'dashboard') }}
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item text-danger" href="#" onclick="deleteTemplate({{ template.id }}, '{{ template.name }}')">
                                                    <i class="bi bi-trash me-2"></i>{{ 'templates.actions.delete'|trans({}, 'dashboard') }}
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        {% if template.category %}
                                            <span class="badge bg-primary mb-2">{{ template.category.name }}</span>
                                        {% endif %}
                                        {% if template.material %}
                                            <span class="badge bg-secondary mb-2">{{ template.material }}</span>
                                        {% endif %}
                                    </div>
                                    
                                    {% if template.templateDescription %}
                                        <p class="card-text small">{{ template.templateDescription|length > 100 ? template.templateDescription|slice(0, 100) ~ '...' : template.templateDescription }}</p>
                                    {% endif %}
                                    
                                    <div class="row text-center mt-3">
                                        <div class="col">
                                            <div class="small text-muted">{{ 'templates.list.used_count'|trans({}, 'dashboard') }}</div>
                                            <div class="fw-bold">{{ 'templates.list.used_times'|trans({'%count%': template.usageCount}, 'dashboard') }}</div>
                                        </div>
                                        <div class="col">
                                            <div class="small text-muted">{{ 'templates.list.created_on'|trans({}, 'dashboard') }}</div>
                                            <div class="fw-bold">{{ template.createdAt|date('d/m/y') }}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <button class="btn btn-success btn-sm w-100" onclick="useTemplate({{ template.id }})">
                                        <i class="bi bi-play-circle me-1"></i>
                                        {{ 'templates.actions.create_with_template'|trans({}, 'dashboard') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="text-center py-5">
                    <i class="bi bi-clipboard display-4 text-muted"></i>
                    <h4 class="mt-3">{{ 'templates.empty.title'|trans({}, 'dashboard') }}</h4>
                    <p class="text-muted">{{ 'templates.empty.description'|trans({}, 'dashboard') }}</p>
                    <button type="button" class="btn btn-primary" onclick="window.location.href='{{ path('app_dashboard_items_new') }}?create_template=1'">
                        {{ 'templates.empty.create_button'|trans({}, 'dashboard') }}
                    </button>
                </div>
            {% endif %}


<!-- Modal de confirmation de suppression -->
<div class="modal fade" id="deleteTemplateModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ 'templates.modal.delete.title'|trans({}, 'dashboard') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>{{ 'templates.modal.delete.confirm_message'|trans({}, 'dashboard') }} <strong id="deleteTemplateName"></strong> ?</p>
                <p class="text-muted small">{{ 'templates.modal.delete.warning'|trans({}, 'dashboard') }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'templates.modal.actions.cancel'|trans({}, 'dashboard') }}</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteTemplate">{{ 'templates.modal.actions.delete_confirm'|trans({}, 'dashboard') }}</button>
            </div>
        </div>
    </div>
</div>

<script>
// Traductions JavaScript
const translations = {
    edit_in_development: "{{ 'templates.js.edit_in_development'|trans({}, 'dashboard') }}",
    delete_error: "{{ 'templates.js.delete_error'|trans({}, 'dashboard') }}"
};

function useTemplate(templateId) {
            window.location.href = `{{ path('app_dashboard_items_new') }}?template=${templateId}`;
}

function editTemplate(templateId) {
    // Rediriger vers l'édition du template (à implémenter)
    console.log('Edit template:', templateId);
    alert(translations.edit_in_development);
}

function deleteTemplate(templateId, templateName) {
    document.getElementById('deleteTemplateName').textContent = templateName;
    document.getElementById('confirmDeleteTemplate').onclick = function() {
        // Appel AJAX pour supprimer le template (à implémenter)
        console.log('Delete template:', templateId);
        
        fetch(`/member/templates/${templateId}/delete`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert(translations.delete_error);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert(translations.delete_error);
        });
        
        bootstrap.Modal.getInstance(document.getElementById('deleteTemplateModal')).hide();
    };
    
    new bootstrap.Modal(document.getElementById('deleteTemplateModal')).show();
}
</script>
{% endblock %}