{% macro os_radio(field, class = "") %}
    <div class="">
        {{form_label(field)}}
        <div class="flex row">
        {% for o in field.vars.choices %}
            <div class="flex row middle relative right-20 adapt">
                <input type="radio" name="{{ field.vars.full_name }}" value="{{ o.value }}" id="{{ field.vars.id~ '_' ~ o.value }}" {{ o.value == field.vars.data ? "checked" }} class="hide {{field.vars.attr.class ?? ""}} {{class}}" data-target="{{field.vars.attr.target ?? ""}}">
                <label for="{{field.vars.id~ '_' ~ o.value}}" class="icon min flex row middle"></label>
                <label for="{{field.vars.id~ '_' ~ o.value}}" class="left-10 p adapt">{{o.label}}</label>
            </div>
        {% endfor %}
        </div>
    </div>
    {% do field.setRendered() %}
{% endmacro %}

{% macro os_radio_table(field, searchLength = 5) %}
    {% if (field.vars.choices|length)>=searchLength %}
    {% include 'Admin/search-box.html.twig' with { 'noResearch':true, 'target':'#'~field.vars.id~' tr' }   %}
    {% endif %}
    <table  style="margin-top: 0">
        <tbody id="{{ field.vars.id }}">
            {% for o in field.vars.choices %}
            <tr data-radio="{{ o.value == field.vars.value ? 1 : 0 }}">
                <td>
                    <input type="radio" name="{{ field.vars.full_name }}" value="{{ o.value }}" id="{{ field.vars.id~ '_' ~ o.value }}" {{ o.value == field.vars.data ? "checked" }} required>
                </td>
                <td class="noactions">{{ (o.label is defined) ? o.label : o }}</td>
            </tr>
            {% endfor %}
            {% do field.setRendered() %}
        </tbody>
    </table>
{% endmacro %}

{% macro os_checkbox_table(field, searchLength = 5) %}
    {% if (field.vars.choices|length) >= searchLength %}
    {% include 'Admin/search-box.html.twig' with { 'noResearch':true, 'target':'#'~field.vars.id~' tr' }   %}
    {% endif %}
    <table style="margin-top: 0">
        <tbody id="{{ field.vars.id }}">
            {% for o in field.vars.choices %}
            {% set checked = (o.value in field.vars.value)?true:false %}
            <tr data-checked="{{checked ? 1 : 0 }}">
                <td>
                    <input type="checkbox" name="{{ field.vars.full_name~'[]' }}" value="{{o.value}}" {{ checked is defined and checked ? "checked" }}>
                </td>
                <td class="noactions">{{ (o.label is defined)?o.label:o }}</td>
            </tr>
            {% endfor %}
            {% do field.setRendered() %}
        </tbody>
    </table>
{% endmacro %}

{% macro os_checkbox(field) %}
<div class="flex row space wrap w100">
    {% for o in field.vars.choices %}
    {% set checked = (o.value in field.vars.value)?true:false %}
    <div class="relative flex row top vt-10-in {{desktop('half-20')}}">
        <div class="relative">
            <input class="os-checkbox hide" type="checkbox" name="{{ field.vars.full_name~'[]' }}" id="{{field.vars.id~'_'~loop.index}}" value="{{o.value}}" {{ checked is defined and checked ? "checked" }}>
            <label class="icon min block relative" for="{{field.vars.id~'_'~loop.index}}"></label>
        </div>
        <label class="top-5" for="{{field.vars.id~'_'~loop.index}}">{{o.label}}</label>
    </div>
    {% endfor %}
    {% do field.setRendered() %}
</div>
{% endmacro %}

{% macro os_document(field, class, index) %}
{% set name = field.vars.id %}
<div id="{{name}}" class="os-file w100 hoverflow p {{index ? 'removable bottom-10'}}" >
    <div class="file-edit flex row h100">
        <span class="p adapt text-right index bg-warning black hz-10-in flex col middle">{{ index ? index : "<i class='fa fa-paperclip'></i>" }}</span>
        <div class="w100 right-10">
            {{form_widget(field.name, {attr:{'class':'p-alt name hz-10-in nomargin noborder noradius fill', 'placeholder':"Sélectionnez un fichier"}})}}
        </div>
        <div class="hide right-10">
            {{form_widget(field.target, {required: field.vars.value ? false : field.vars.required, attr:{'multiple':'multiple', 'data-target':'#'~name, 'value':''}})}}
        </div>
        {% set reader = 'hide' %}
        {% if field and field.vars.value %}
            {% if field.vars.value.mimeType == 'application/pdf' %}
            {% set reader = 'os-read' %}
            {% elseif 'image' in field.vars.value.mimeType %}
            {% set reader = 'os-image' %}
            {% endif %}
        {% endif %}
        <div class="p-alt size nowrap text-right right-10 flex row middle">{{field and field.vars.value ? field.vars.value.formatSize}}</div>
        <span class="p-alt os-file-edit success center flex col middle pointer" data-target="#{{name}}" title="Sélectionner un fichier"><i class="fa fa-edit"></i></span>
        <span class="p-alt file {{reader}} success center flex col middle pointer" {{ field and field.vars.value ? "data-url="~asset(field.vars.value.file) }} title="Prévisualiser le fichier"><i class="fa fa-eye"></i></span>
        <a class="p-alt success center flex col middle pointer" {{ field and field.vars.value ? "href="~asset(field.vars.value.file) }} title="Télécharger le fichier" download><i class="fa fa-download"></i></a>
        <span class="p-alt error center flex col middle {{index ? 'os-remove' : 'os-file-reset'}} pointer" data-target="#{{name}}" title="!!! Supprimer le fichier !!!"><i class="fa fa-times"></i></span>
    </div>
</div>
{% do field.setRendered() %}
{% endmacro %}

{% macro os_documents(field, label, class) %}
<div class="w100">
    <span class="flex row space bottom bottom-10">
        <span>
            <p class="light">Sélectionner les documents et gérer les à partir de cet espace.</p>
        </span>
        <span id="btn-{{field.vars.id}}" class="icon bg-success medium radius-half padding-10 pointer transition os-file-add flex col middle text-center" data-target="#{{field.vars.id}}" title="Ajouter un document">
            <i class="fa fa-plus h2 white transition"></i>
        </span>
    </span>
    <figure class="os-preview w100">
        <div id="{{field.vars.id}}" class="padding-10" data-prototype="{{_self.os_document(field.files.vars.prototype, class, '__name__')|e}}">
            {% for o in field.files|reverse %}
            {{ _self.os_document(o, class, loop.index) }}
            {% endfor %}
        </div>
    </figure>
</div>
{% do field.setRendered() %}
{% endmacro %}

{% macro os_picture(field, class = 'contain', index = null) %}
{% set name = field.vars.id~(index ? index) %}
    {% if not index %}
    <div>
        <figure class="os-preview os-preview-img hoverflow">
    {% endif %}
            <div id="{{name}}" class="os-img {{ index ? mobile('w100')~' removable' : 'nomargin fill'}}">
                <div class="fill relative nomargin relative">
                    <div class="hide">{{form_widget(field.target, {attr:{'data-target':'#'~name, 'value':''}})}}</div>
                    <div class="absolute fill left top nomargin os-file-edit pointer" data-target="#{{name}}">
                        <img {{ field and field.vars.value ? "src="~asset(field.vars.value.hasThumbnail is defined and field.vars.value.hasThumbnail ? field.vars.value.thumbnail : field.vars.value.file) : "" }} class="{{class}}">
                    </div>
                    <div class="absolute h100 top right nomargin">
                        <div class="flex col h100 relative nomargin">
                            <span class="os-file-edit success center flex col middle pointer" data-target="#{{name}}" title="Sélectionner une photo"><i class="fa fa-edit"></i></span>
                            <span class="file os-image success center flex col middle pointer" {{ field and field.vars.value ? "data-image="~asset(field.vars.value.file) }} title="Prévisualiser l'image en grande taille"><i class="fa fa-eye"></i></span>
                            <a class="success center flex col middle pointer" {{ field and field.vars.value ? "href="~asset(field.vars.value.file) }} title="Télécharger la photo" download><i class="fa fa-download"></i></a>
                            <span class="error center flex col middle {{index ? 'os-remove' : 'os-file-reset'}} pointer" data-target="#{{name}}" title="!!! Supprimer la photo !!!"><i class="fa fa-times"></i></span>
                        </div>
                    </div>
                </div>
            </div>
    {% if not index %}
        </figure>
    </div>
    {% endif %}
{% do field.setRendered() %}
{% endmacro %}

{% macro os_album(field, imgClass = 'contain') %}
<div class="w100">
    <div>
        <p class="light">Ajouter des photos dans cette section pour les afficher en diaporama.</p>
    </div>
    <div class="flex row">
        <label class="right-10 nowrap">Titre de l'album : </label>
        {{form_widget(field.title)}}
    </div>
    <figure class="os-preview w100">
        <div id="{{field.vars.id}}" class="padding-10 flex row wrap" data-prototype="{{_self.os_picture(field.pictures.vars.prototype, imgClass, '__name__')|e}}">
            <div id="btn-{{field.vars.id}}" class="os-img-add {{mobile('w100')}}" data-target="#{{field.vars.id}}"></div>
            {% for o in field.pictures %}
            {{ _self.os_picture(o, imgClass, loop.index) }}
            {% endfor %}
        </div>
    </figure>
</div>
{% do field.setRendered() %}
{% endmacro %}

{% block os_picture_widget %}
    {{_self.os_picture(form)}}
{% endblock %}

{% block os_album_widget %}
    {{_self.os_album(form)}}
{% endblock %}

{% block os_file_widget %}
    {{_self.os_document(form)}}
{% endblock %}

{% block os_file_row %}
    {{form_label(form)}}
    {{form_help(form)}}
    {{_self.os_document(form)}}
{% endblock %}

{% block os_biblio_widget %}
    {{_self.os_documents(form)}}
{% endblock %}

{% block checkbox_row %}
<div class="flex row middle relative">
    <div class="relative">
        {{form_widget(form, {attr:{class:'os-checkbox hide '~(form.vars.attr.class ?? "")}})}}
        <label class="icon min block relative" for="{{form.vars.id}}"></label>
    </div>
    {{form_label(form)}}
</div>
{% endblock %}