<div class="modal-dialog c-crops__dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
                <span>×</span>
                <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title">{{ 'cs_assets.edit.title' | trans }}</h4>
        </div>
        <div class="modal-body">
            <div class="c-crops__content">
                <div class="c-crops__primary-image">
                    <img class="c-crops__primary-image--image" src="{{ asset.url }}" alt="{{ asset.name  }}" data-asset-id="{{ asset.id }}" id="crop-target">
                </div>
                <div class="c-crops__content--info" id="c-crops__content--info">
                    <h4 class="c-crops__content--title">{{ 'cs_assets.form.crops.label' | trans }}</h4>
                    <p class="c-crops__content--text">{{ 'cs_assets.form.crops.default' | trans }}</p>
                    <div class="c-crops__content">
                        {% for crop in cropsForButtons %}
                            <a href="javascript:void(0)" data-crop-id="{{ crop.entity.id }}" class="c-crops__content--crop" data-action="crop" data-cords="{{ crop.cords|join(',') }}" data-ratio="{{ crop.ratio }}">
                                {{ crop.entity.title|capitalize }}
                            </a>
                        {% endfor %}
                    </div>

                    {% if allWatermarks|default %}
                        <div id="watermark-container" class="c-watermark">
                            <div class="c-watermark__options">
                                <label for="watermark-list" class="c-watermark__label">{{ 'cs_assets.form.watermark.title'|trans }}</label>
                                <div class="c-watermark__checks">
                                    {% for watermark in allWatermarks %}
                                        <input class="" name="watermark[]" type="checkbox" value="{{ watermark.id|default }}"><span class="c-watermark__checks--span">{{ watermark.name|default }}</span>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    {% endif %}

                    <button type="button" id="apply-crop" class="btn mainBtn c-crops__content--button" data-btn-type="save" disabled>{{ 'cs_assets.form.crops.apply' | trans }}</button>
                </div>
            </div>

            <hr>

            <h4 class="c-crops__content--results-title">
                {{ 'cs_assets.form.crops.label-created' | trans }}
            </h4>

            <div class="c-crops__content--results" data-crops-results>
                {% include 'Comitium5DesignerBundle:AssetCrop:crops-results.html.twig' %}
            </div>

        </div>
        {# Treiem el footer amb "cancelar" i "aceptar" #}
        {# <div class="modal-footer">
            <button type="button" class="btn defaultBtn" data-dismiss="modal" data-btn-type="cancel">Cancel·la</button>
            <button type="button" class="btn mainBtn" data-btn-type="save">Accepta</button>
        </div> #}
    </div>
</div>
