{% block iconfont_widget %}
    {% apply spaceless %}
        <!-- Icon Chooser -->
        <div id="{{ id }}_widget" class="icon-chooser media-chooser {% if(value.ent is defined) %}media-chooser--choosen{% endif %} js-icon-chooser" data-css-link="{{ loader_object.cssLink }}" data-widget-id="{{id}}">
            <input type="hidden" name="{{ full_name }}" value="{{ value|default('') }}" class="js-icon-chooser__input"/>

            <!-- Icon Chooser Preview -->
            <div class="media-chooser__preview">
                <figure class="thumbnail">
                    <div class="icon-chooser__preview js-icon-chooser__preview {{ value|default('') }}"></div>
                </figure>

                <!-- Icon Chooser delete button -->
                <button type="button" class="btn media-chooser__preview__del-btn js-icon-chooser__close">
                    <i class="fa fa-trash-o"></i>
                </button>
            </div>

            <!-- Icon Chooser choose button -->
            <button type="button" class="btn btn-default btn--raise-on-hover media-chooser__choose-btn js-icon-chooser__choose" data-toggle="modal" data-target="#{{ id }}_iconChooserModal" data-link="{{ path('KunstmaanMediaBundle_icon_font_chooser', {'loader': loader, 'loader_data': loader_data }) }}">
                <i class="fa fa-image btn__icon media-chooser__choose-btn__icon"></i>
                {{ 'media.widget.choose' | trans }}
            </button>
        </div>

        <!-- Icon Chooser Modal -->
        <div class="js-ajax-modal modal fade" id="{{ id }}_iconChooserModal" role="dialog" aria-labelledby="iconhooserModal" aria-hidden="true" data-loaded="false" data-widget-id="{{ id }}">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">

                    <!-- Header -->
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <i class="fa fa-times"></i>
                        </button>
                        <h3 class="modal-title">
                            {{ 'media.widget.icon_chooser' | trans }}
                        </h3>
                    </div>

                    <!-- Body -->
                    <div class="js-ajax-modal-body modal-body ajax-modal__body"></div>
                </div>
            </div>
        </div>
    {% endapply %}
{% endblock iconfont_widget %}


{% block media_widget %}
{% apply spaceless %}
    <div id="{{ id }}-widget" class="media-chooser {% if(value.ent is defined) %}media-chooser--choosen{% endif %}">
        <!-- Hidden input -->
        <input id="{{ id }}" type="hidden" name="{{ full_name }}" value="{% if(value.id is defined) %}{{ value.id }}{% endif %}">

        <!-- Preview -->
        <div class="media-chooser__preview">
            <figure class="thumbnail">
                {% if(value.ent is defined) %}
                    {% set media = value.ent %}
                    {% set handler = mediamanager.getHandler(media) %}
                    {% set imageurl =  handler.getImageUrl(media, app.request.basePath) %}
                    {% if imageurl is not empty and media.location == 'local' %}
                        {% if imageurl|lower|split('.')|last == 'svg' or 'image/svg' in media.contentType %}
                            {% set imageurlretina = imageurl %}
                        {% else %}
                            {% set imageurlretina = asset(imageurl | imagine_filter('media_list_thumbnail_retina')) %}
                            {% set imageurl = asset(imageurl | imagine_filter('media_list_thumbnail')) %}
                        {% endif %}
                    {% endif %}
                    {% if imageurl %}
                        <img src="{{ imageurl }}" srcset="{{ imageurl }} 1x{{ imageurlretina is defined ? ', ' ~ imageurlretina ~ " 2x" }}" alt="{{ media.name }}" id="{{ id }}__preview__img" class="thumbnail-img media-chooser__preview__img">
                        <figcaption id="{{ id }}__preview__title" class="media-chooser__preview__title">
                            {{ media.name }}
                        </figcaption>
                    {% else %}
                        <i class="fa fa-file-o media-thumbnail__icon"></i>
                        <figcaption id="{{ id }}__preview__title" class="media-chooser__preview__title">
                            {{ media.name }}
                        </figcaption>
                    {% endif %}
                {% else %}
                    <img id="{{ id }}__preview__img" class="thumbnail-img media-chooser__preview__img">
                    <figcaption id="{{ id }}__preview__title" class="media-chooser__preview__title"></figcaption>
                {% endif %}
            </figure>

            <button type="button" id="{{ id }}__preview__del-btn" class="js-media-chooser-del-preview-btn btn media-chooser__preview__del-btn" data-linked-id="{{ id }}">
                <i class="fa fa-trash"></i>
            </button>
        </div>


        <!-- Select Button -->
        <button type="button" class="btn btn-default btn--raise-on-hover media-chooser__choose-btn" data-toggle="modal" data-target="#{{ id }}-mediaChooserModal" data-link="{{ path(chooser, {'type': mediatype}) }}">
            <i class="fa fa-image btn__icon media-chooser__choose-btn__icon"></i>
            {{ 'media.widget.choose' | trans }}
        </button>
    </div>


    <!-- Media Chooser Modal -->
    <div class="js-ajax-modal modal fade" id="{{ id }}-mediaChooserModal" role="dialog" aria-labelledby="mediaChooserModal" aria-hidden="true" data-loaded="false" data-linked-input-id="{{ id }}" data-media-chooser="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <!-- Header -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <i class="fa fa-times"></i>
                    </button>
                    <h3 class="modal-title">
                        {{ 'media.widget.media_chooser' | trans }}
                    </h3>
                </div>

                <!-- Body -->
                <div class="js-ajax-modal-body modal-body ajax-modal__body"></div>
            </div>
        </div>
    </div>
{% endapply %}
{% endblock %}