{% block vich_image_row %}
    {% set force_error = true %}
    {{ block('form_row') }}
{% endblock %}

{% block vich_image_widget %}
    {% set color_schemes = {
    'dark': {
        info: '#39A0ED',
        warning: '#F0AD4E',
        danger: '#D42124',
        success: '#006B2E',
        text: '#222222',
        text_muted: '#737373',
        link: '#205081',
        black: '#111111',
        white: '#FFFFFF',
        gray_darker: '#252525',
        gray_dark: '#444',
        gray: '#AAA',
        gray_light: '#CCC',
        gray_lighter: '#F5F5F5',
        page_background: '#F5F5F5',
        table_header: '#EEE',
        table_border: '#CCC',
        table_row_border: '#DDD',
    }
    } %}

{% set colors = color_schemes['dark'] %}
    <style>
        
    {# VichUploaderBundle files and images
       ------------------------------------------------------------------------- #}
    .easyadmin-vich-image img {
        border: 3px solid {{ colors.white }};
        box-shadow: 0 0 3px {{ colors.gray }};
        max-height: 300px;
        max-width: 400px;
    }
    .easyadmin-vich-image input[type="file"],
    .easyadmin-vich-file input[type="file"] {
        padding-top: 7px;
    }
    .easyadmin-vich-file a {
        display: inline-block;
        padding-top: 7px;
    }
    {# the checkbox to delete the image/file #}
    .easyadmin-vich-file .field-checkbox {
        margin-bottom: 0;
    }
    .easyadmin-vich-file .field-checkbox .col-sm-2,
    .easyadmin-vich-image .field-checkbox .col-sm-2 {
        display: none;
    }
    
    {# Thumbnails and image lightbox
   ------------------------------------------------------------------------- #}
    .easyadmin-thumbnail img {
        border: 3px solid {{ colors.white }};
        box-shadow: 0 0 3px {{ colors.gray }};
        max-height: 100px;
        max-width: 100%;
    }
    .easyadmin-thumbnail img:hover {
        cursor: zoom-in;
    }
    .featherlight .easyadmin-lightbox:hover {
        cursor: zoom-out;
    }
    .easyadmin-lightbox {
        display: none;
    }
    .featherlight .easyadmin-lightbox {
        display: block;
    }
    .easyadmin-lightbox img {
        max-width: 100%;
    }

    {# Modal windows
       ------------------------------------------------------------------------- #}
    .modal-dialog .modal-content {
        border-radius: 0;
    }
    .modal-dialog .modal-content .modal-body h4 {
        font-size: 21px;
        margin: .5em 0;
    }
    .modal-dialog .modal-footer {
        background: {{ colors.gray_lighter }};
        border-top: 1px solid {{ colors.gray_light }};
        margin-top: 1.5em;
    }

    
</style>    
{% apply spaceless %}
    <div class="easyadmin-vich-image">
        {{ form_widget(form.file) }}
        {% if form.delete is defined %}
            {{ form_row(form.delete, { label: 'Eliminar' }) }}
        {% endif %}

        {% if download_uri|default('') is not empty %}
            {% set _lightbox_id = 'easyadmin-lightbox-' ~ id %}

            <a href="#" class="easyadmin-thumbnail" data-featherlight="#{{ _lightbox_id }}" data-featherlight-close-on-click="anywhere"
               data-toggle="modal" data-target="#vichUploaderImage_{{id}}">
                <img src="{{ asset(download_uri) }}">
            </a>                
            <div id="{{ _lightbox_id }}" class="easyadmin-lightbox">
                <img src="{{ asset(download_uri) }}">
            </div>
            
            <div class="modal fade" id="vichUploaderImage_{{id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-lg">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Imagen</h5>            
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body modal-dialog-scrollable">
                       <div class="container-fluid">
                            <div class="row">
                                <img class="img-fluid" src="{{ asset(download_uri) }}">
                            </div>
                        </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"><span class="fa fa-times-circle"></span> Cerrar</button>            
                    <a class="btn btn-primary" href="{{ asset(download_uri) }}" download><span class="fa fa-download"></span> Descargar </a>
                  </div>
                </div>
              </div>
            </div>    
        {% endif %}
    </div>
{% endapply %}
{% endblock %}

{% block vich_file_row %}
    {% set force_error = true %}
    {{ block('form_row') }}
{% endblock %}

{% block vich_file_widget %}
{% apply spaceless %}
    <div class="easyadmin-vich-file">
        {% if download_uri|default('') is not empty %}
            {% set download_title = download_uri|split('/')|last ?: 'download'|trans({}, 'VichUploaderBundle') %}
            <a href="{{ asset(download_uri) }}">{{ download_title }}</a>
        {% endif %}

        <div class="row">
            {% if form.delete is defined %}
            <div class="col-sm-3 col-md-2">
                {{ form_row(form.delete, { label: 'action.delete' }) }}
            </div>
            {% endif %}
            <div class="{{ form.delete is defined ? 'col-sm-9 col-md-10' : 'col-sm-12' }}">
                {{ form_widget(form.file) }}
            </div>
        </div>
    </div>
{% endapply %}
{% endblock %}