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

{% block page_content_start %}
    <section id="editVideo" style="width: 100%">
        <h3>Modifier la vidéo</h3>
        <form enctype="multipart/form-data" method="POST" style="display: flex; flex-direction: column; gap: 1rem; border: grey; box-shadow: grey 1px 1px 5px; padding: 1rem; border-radius: 5px; margin: 5rem auto; width: 100%; max-width: 400px">
            <div style="display: flex; flex-direction: column">
                <label for="name">Nom de la vidéo</label>
                <input id="name" name="name" type="text" required style="padding: .5rem" value="{{ video.title }}">
            </div>
            <div style="display: flex; flex-direction: column">
                <label for="category">Catégorie de la vidéo</label>
                <input id="category" name="category" type="text" style="padding: .5rem" value="{{ video.category }}">
            </div>
            <div style="display: flex; flex-direction: column">
                <label for="description">Description de la vidéo</label>
                <textarea id="description" name="description" style="padding: .5rem; resize: none">{{ video.description }}</textarea>
            </div>
            <div>
                <input type="checkbox" id="isRdvIB" name="isRdvIB"
                    {% if video.isRdvIB %}
                        checked
                    {% endif %}
                >
                <label for="isRdvIB" style="margin-left: .5rem">Rdv IB</label>
            </div>
            <div id="preview" style="text-align: center">
                <img id="previewThumbnail" src="{{ asset('videos/' ~ video.id ~ '/' ~ video.thumbnailname) }}" style="max-width: 100%; max-height: 200px; object-fit: contain;">
            </div>
            <div style="display: flex; flex-wrap: nowrap; justify-content: center; gap: 1rem">
                <div>
                    <label for="thumbnail" style="background-color: #00B5E6; color: white; padding: .5rem; border-radius: 3px; cursor: pointer; display: flex;">
                        <span style="display: flex; align-items: center; text-align: center">
                            Modifier la miniature <i class="fas fa-image"></i>
                        </span>
                    </label>
                    <input type="file" id="thumbnail" name="thumbnail" accept="image/jpeg" style="display: none">
                </div>
            </div>
            <button type="submit" style="margin: 0 auto; background-color: #00B5E6; color: white; padding: .5rem; border-radius: 3px; border: none">
                <span style="display: flex; gap: .5rem; align-items: center">
                    Enregistrer <i class="fas fa-save"></i>
                </span>
            </button>
        </form>
        <a href="{{ path('app_video_show', {id: video.id}) }}" style="background-color: #00B5E6; color: white; padding: .5rem; border-radius: 3px; border: none">< Retour</a>
    </section>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        $(document).ready(function() {
            $('#thumbnail').on('change', function() {
                const file = this.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#previewThumbnail').attr('src', e.target.result);
                    }
                    reader.readAsDataURL(file);
                }
            });
        });
    </script>
{% endblock %}