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

{% block title %}{{ 'Car Type - %name% :: Dashboard' | trans({'%name%': car_group.name}) }}{% endblock %}

{% block body %}
    <h1>{{'Car Type - %name%'|trans({'%name%': car_group.name})}}</h1>

    <table class="table details-table">
        <tbody>
            <tr>
                <th>{{'ID'|trans}}</th>
                <td>{{ car_group.id }}</td>
            </tr>
            <tr>
                <th>{{'Name'|trans}}</th>
                <td>{{ car_group.name }}</td>
            </tr>
            <tr>
                <th>{{'Description'|trans}}</th>
                <td>{{ car_group.description|slice(0, 100) }}</td>
            </tr>
            <tr>
                <th>{{ 'Photo'|trans }}</th>
                <td>
                {% if car_group.photo is not empty %}
                    <div class="single-photo single-preview" id="singlePhoto">
                        <img src="{{ asset('uploads/photos/' ~ car_group.photo.files['admin-preview'].filename) }}" />
                        <a href="javascript:" class="button button-small delete-image">{{ 'Delete Photo' | trans }}</a>
                        <a href="javascript:" class="button button-small generate-image">{{ 'Generate' | trans }}</a>
                    </div>
                {% endif %}
                </td>
            </tr>
        </tbody>
    </table>

    {{ include('dashboard/car_group/_delete_form_and_edit.html.twig') }}
{% endblock %}

{% block javascripts %}
    <!-- Axios -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>

    <script>
        document.querySelector('.delete-image').addEventListener('click', () => {
            axios.delete('{{ path('car_group_delete_current_photo', { 'id': car_group.id }) }}')
                .then(response => response.data)
                .then(() => {
                    const photo = document.getElementById('singlePhoto');
                    photo.parentElement.removeChild(photo);
                });
        });

        document.querySelector('.generate-image').addEventListener('click', () => {
            axios.get('{{ path('car_group_generate_photo', { id: car_group.id }) }}')
                .then(response => response.data)
                .then(() => alert('Success'));
        });
    </script>
{% endblock %}