{% extends default ? "partials/field.html.twig" : 'forms/' ~ layout|default('field') ~ '.html.twig' %}

{% block input %}
    <div class="g-filepicker">
        <div class="input-group append">
            <input
                    {# required attribute structures #}
                    type="text"
                    name="{{ (scope ~ name)|fieldName }}"
                    value="{{ value|join(', ') }}"
                    {# global attribute structures #}
                    {{ block('global_attributes') }}
                    {# non-gloval attribute structures #}
                    {% if field.autocomplete in ['on', 'off'] %}autocomplete="{{ field.autocomplete }}"{% endif %}
                    {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
                    {% if field.disabled in ['on', 'true', 1] %}disabled="disabled"{% endif %}
                    {% if field.list is defined %}list="{{ field.list }}"{% endif %}
                    {% if field.placeholder is defined %}placeholder="{{ field.placeholder }}"{% endif %}
                    />
            {% set picker = {'field': 'input[name="' ~ ((scope ~ name)|fieldName|e) ~ '"]', 'root': (field.root|default('gantry-media://'))|e, 'filter': (field.filter|default(false))|e } %}
            <span class="input-group-btn">
                <button class="button" type="button" aria-label="{{ 'GANTRY5_PLATFORM_SELECT'|trans }} {{ field.label|trans_key('GANTRY5_FORM_FIELD', scope, name, 'LABEL') }}" data-g5-filepicker="{{ picker|json_encode()|e('html_attr') }}">
                    <i class="far {{ field.icon|default('fa-copy') }}" aria-hidden="true" ></i>
                </button>
            </span>
            {% block reset_field %}{{ parent() }}{% endblock %}
        </div>
    </div>
{% endblock %}
