{% extends "porto-corporate-layout.html.twig" %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('fonds-structure-indice-reference-photo-style') }}
{% endblock %}

{% block pageheader %}
    {{ parent() }}
{% endblock %}

{% block container_class %} container py-2 {% endblock %}

{% block pagecontent %}

    <div class="row justify-content-center">

        <div class="col-lg-12">

            <div class="row">
                <div class="col-md-12">
                    {% for flashMessage in app.session.flashbag.get('error') %}
                        <div class="alert alert-danger alert-dismissible" >
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            {{ flashMessage|trans|raw }}
                        </div>
                    {% endfor %}
                    {% for flashMessage in app.session.flashbag.get('notice') %}
                        <div class="alert alert-success alert-dismissible" >
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            {{ flashMessage|trans|raw }}
                        </div>
                    {% endfor %}
                </div>
           </div>

            <div class="overflow-hidden mb-1">
                <h2 class="font-weight-normal text-7 mb-0">
                    {{'Photo indice référence fonds structuré'|trans}} {{fondsStructure.nom}}
                </h2>
            </div>

            <div class="overflow-hidden mt-3 mb-4 pb-3">
                {% if indiceReferencePhoto is not null %}
                    <div class="row">
                        <div class="col-md-10 text-center">
                            <img src="data:image/png;base64, {{indiceReferencePhoto}}" />
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-10 text-center">
                            <a
                                class="text-4 color-silver hover-grey"
                                href="{{path('attitudepatrimoine_fonds_structure_indice_reference_photo_suppression', {fondsStructureId: fondsStructure.id})}}"
                                onClick="return confirm('{{'Vous allez supprimer la photo de l indice, continuer ?'|trans}}');"
                            >
                                <i class="fas fa-times-circle me-1"></i>{{'Supprimer'|trans}}
                            </a>
                        </div>
                    </div>
                {% else %}
                    <p class="mb-0">{{'Il n\'y a actuellement aucune photo pour l\'indice de référence'|trans}}</p>
                {% endif %}
            </div>

            <div class="overflow-hidden mb-1">
                <h2 class="font-weight-normal text-7 mb-0">
                    {{'Mettre à jour la photo pour l\'indice de référence'|trans}}
                </h2>
            </div>

            <h4>{{'1. Télécharger une photo'|trans}}</h4>
            <div class="row mb-4">
                <div class="col-md-12">
                    <p class="color-777 font-italic mb-0">{{'Sélectionner un fichier sur votre ordinateur'|trans}}
                    <div class="demo-wrap upload-demo">
                        <div class="actions">
                            <a class="file-btn">
                                <input type="file" id="upload" value="{{'Choisir un fichier'|trans}}" accept="image/*">
                            </a>
                        </div>
                    </div>
                </div>
           </div>

            <h4 class="mb-3">{{'2. Ajuster le résultat'|trans}}</h4>
            <div class="row">
                <div class="col-md-12">
                    <div id="upload-demo"></div>
                </div>
           </div>

            <div class="row mb-5">
                <div class="col-md-12 text-center">
                    <button class="btn btn-client-primary-inverse upload-result p-3" onClick="enregistrerPhoto(fondsStructureId);">
                        <h4 class="mb-0 color-white hover-client">
                            {{'3. Enregistrer la photo'|trans}}
                        </h4>
                    </button>
                </div>
           </div>

        </div>
    </div>


{% endblock %}

{% block javascript %}

    {{ parent() }}

    {{ encore_entry_script_tags('fonds-structure-indice-reference-photo-script') }}

    <script>

        var fondsStructureId = {{fondsStructure.id}};

        $(document).ready(function() {

        });

    </script>

{% endblock %}