{% trans_default_domain 'admin' %}

<div class="card mb-4 crop-card">

    <div class="card-body media-body text-center">
        {{ media|thumb(thumb) }}
    </div>

    <h5 class="card-title no-radius mb-0 bg-info-light p-3">
        {{ "Taille"|trans }} :
        {% if configuration.width != "" and configuration.height != "" %}
            {{ configuration.width }}px X {{ configuration.height }}px <small class="italic ml-2">{{ "(l x h)"|trans }}</small>
        {% elseif configuration.width != "" and configuration.height == "" %}
            {{ configuration.width }}px X {{ "Indéterminée"|trans }} <small class="italic ml-2">{{ "(l x h)"|trans }}</small>
        {% elseif configuration.width == "" and configuration.height != "" %}
            {{ "Indéterminée"|trans }} X {{ configuration.height }}px <small class="italic ml-2">{{ "(l x h)"|trans }}</small>
        {% elseif configuration.height == "" and configuration.width != "" %}
            {{ configuration.width }}px X {{ "Indéterminée"|trans }}px <small class="italic ml-2">{{ "(l x h)"|trans }}</small>
        {% elseif configuration.width == "" and configuration.height == "" %}
            {{ "Indéterminée"|trans }}
        {% endif  %}
    </h5>

    <div class="card-body info-body border bg-light">
        <strong>{{ "Utilisé dans :"|trans }}</strong>
        <ul>
            {% for action in configuration.actions %}
                <li>{{ action.adminName }}</li>
            {% endfor  %}
        </ul>
        <div class="row">
            <div class="col-md-{% if thumb.id %}10{% else %}12{% endif %}">
                <button class="btn btn-info w-100" data-toggle="modal" data-target="#crop-modal{{ configuration.id }}">
                    <i class="fas fa-crop-alt mr-2"></i>{{ "Redimensionner"|trans }}
                </button>
            </div>
            {% if thumb.id %}
                <div class="col-md-2">
                    <span class="d-inline-block w-100" data-toggle="tooltip" title="{{ "Réinitialiser"|trans }}">
                        <a href="{{ path('admin_thumb_delete', {"website": websiteId(), "thumb": thumb.id}) }}" class="btn btn-info w-100 swal-delete-link">
                            <i class="fas fa-retweet"></i>
                        </a>
                    </span>
                </div>
            {% endif %}
        </div>
    </div>

</div>

<div id="crop-modal{{ configuration.id }}"
     class="modal bg-info fade fullscreen-modal crop-modal"
     tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content text-left text-white">
            <div class="close-modal"><i class="fal fa-times text-white cursor" data-dismiss="modal"></i></div>
            <div class="modal-body bg-info d-flex">
                <div class="container my-auto ajax-content">
                    <h2 class="main-title text-center font-weight-bold">{{ "Redimensionner"|trans }}</h2>
                    {{ form_start(form, {'attr': {
                        "id": "cropForm" ~ media.id,
                        "action": path("admin_media_cropper", {
                            "website": websiteId(),
                            "media": media.id,
                            "thumbConfiguration": configuration.id
                    })}}) }}

                        {% set fileInfo = website()|fileInfo(media.filename) %}

                        <div class="cropper-wrap"
                             data-width="{{ thumb.width }}"
                             data-height="{{ thumb.height }}">
                            <div class="img-container"><img src="{{ asset(fileInfo.dir) }}" class="image img-fluid" alt="{{ "Image"|trans|striptags }}" /></div>
                            <div class="col-12 p-0 mt-3 docs-buttons">
                                <div class="btn-group">
                                    <span class="btn btn-secondary btn-outline zoom-in">
                                        <span class="docs-tooltip">
                                            <span class="fal fa-search-plus"></span>
                                        </span>
                                    </span>
                                    <span class="btn btn-secondary btn-outline zoom-out">
                                        <span class="docs-tooltip">
                                            <span class="fal fa-search-minus"></span>
                                        </span>
                                    </span>
                                </div>
                                <div class="btn-group">
                                    <span class="btn btn-secondary btn-outline move-left">
                                        <span class="docs-tooltip">
                                            <span class="fal fa-arrow-left"></span>
                                        </span>
                                    </span>
                                    <span class="btn btn-secondary btn-outline move-right">
                                        <span class="docs-tooltip">
                                            <span class="fal fa-arrow-right"></span>
                                        </span>
                                    </span>
                                    <span class="btn btn-secondary btn-outline move-up">
                                        <span class="docs-tooltip">
                                            <span class="fal fa-arrow-up"></span>
                                        </span>
                                    </span>
                                    <span class="btn btn-secondary btn-outline move-down">
                                        <span class="docs-tooltip">
                                            <span class="fal fa-arrow-down"></span>
                                        </span>
                                    </span>
                                </div>
                                <div class="btn-group">
                                    <span class="btn btn-secondary btn-outline rotate-left">
                                        <span class="docs-tooltip">
                                            <span class="fal fa-redo fa-flip-horizontal"></span>
                                        </span>
                                    </span>
                                    <span class="btn btn-secondary btn-outline rotate-right">
                                        <span class="docs-tooltip">
                                            <span class="fal fa-redo"></span>
                                        </span>
                                    </span>
                                </div>
                                <div class="btn-group">
                                    <span data-scale="-1" class="btn btn-secondary btn-outline flip-horizontal">
                                        <span class="docs-tooltip">
                                            <span class="fal fa-arrows-h"></span>
                                        </span>
                                    </span>
                                </div>
                                <div class="docs-data">
                                    {% for field in form.children %}
                                        {% if field.vars.name != 'save' and field.vars.name != 'saveEdit' %}
                                            {{ form_row(form[field.vars.name]) }}
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                        <div class="w-100 text-center modal-btns">
                            {{ form_row(form.save) }}
                        </div>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>
</div>