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

{% block body %}


<!-- BEGIN PAGE BAR -->
    <div class="page-bar">
        
        <!-- BEGIN BREADCRUMB -->
        <ul class="page-breadcrumb">
            <li>
                <a href="{{ path('homepage') }}">Accueil</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <a href="{{ path('marque_index') }}">Marques</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <span>Details</span>
            </li>
        </ul>
        <!-- END BREADCRUMB -->
    </div>

    <br/>

    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <i class="icon-settings"></i>
                <span class="caption-subject">Détails marque</span>
            </div>
        </div>

        <div class="portlet-body form">
            <div class="form-body">
            <table width="100%">
                <tbody>
                    <tr>
                        <th style="width: 200px;">Marque</th>
                        <td>{{ marque.name }}</td>
                    </tr>
                    <tr>
                        <th>Logo</th>
                        <td>
                            {% if marque.logo %}
                                <div style="padding: 15px; background: #f9f9f9; border-radius: 4px; display: inline-block;">
                                    <img src="{{ asset('uploads/marques/logos/' ~ marque.logo) }}" 
                                         alt="{{ marque.name }}" 
                                         style="max-width: 200px; max-height: 120px; object-fit: contain;">
                                </div>
                            {% else %}
                                <span class="text-muted">Aucun logo téléchargé</span>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th>Photo véhicule par défaut</th>
                        <td>
                            {% if marque.defaultVehiculePhoto %}
                                <div style="padding: 15px; background: #f9f9f9; border-radius: 4px; display: inline-block;">
                                    <img src="{{ asset('uploads/marques/photos/' ~ marque.defaultVehiculePhoto) }}" 
                                         alt="Photo par défaut {{ marque.name }}" 
                                         style="max-width: 300px; max-height: 200px; object-fit: contain;">
                                </div>
                            {% else %}
                                <span class="text-muted">Aucune photo par défaut</span>
                            {% endif %}
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>

            <div class="form-actions">
                <div class="row">
                    <div class="col-md-9">
                        <a href="{{ path('marque_index') }}" class="btn default"><i class="fa fa-arrow-left"></i> Retour</a>
                        <a href="{{ path('marque_edit', { 'id': marque.id }) }}" class="btn green"><i class="fa fa-edit"></i> Modifier</a>
                        <button type="button" class="btn red" onClick="document.form.submit();"><i class="fa fa-trash"></i> Supprimer</button>
                    </div>
                </div>
            </div>

            {{ form_start(delete_form) }}
            {{ form_end(delete_form) }}
            
            
        </div>
    </div>


    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-users"></i>Liste des modèles</div>

                <div class="actions">
                    <a href="{{ path('modele_new') }}" class="btn white"><i class="fa fa-plus"></i> Ajouter </a>                </div>
        </div>
        <div class="portlet-body">
            <div class="table-responsive">

                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Modèle</th>
                            <th>Marque</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for modele in marque.modeles %}
                        <tr>
                            <td><a href="{{ path('modele_show', { 'id': modele.id }) }}">{{ modele.id }}</a></td>
                            <td>{{ modele.name }}</td>
                            <td>{{ modele.marque.name }}</td>
                            <td>
                                <div class="btn-group">
                                    <a href="{{ path('modele_show', { 'id': modele.id }) }}" class="btn btn-xs green" title="Afficher"><i class="fa fa-mail-forward"></i></a>
                                    <a href="{{ path('modele_edit', { 'id': modele.id }) }}" class="btn btn-xs blue" title="Modifier"><i class="fa fa-edit"></i></a>
                                    <a href="{{ path('modele_delete', { 'id': modele.id }) }}" class="btn btn-xs red" title="Supprimer"><i class="fa fa-close"></i></a>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
			</table>
		</div>
	</div>

    
{% endblock %}