{% extends "@bazar/layouts/input.twig" %}

{% block input %}
    {{ include_css('tools/bazar/presentation/styles/inputs/file.css') }}
    <div class="input-group file-or-url-input">
        {% if value %}
            {% if isUrl %}
                <span class="url-indicator"><i class="fa fa-link"></i></span>
            {% endif %}
            <a href="{{ fileUrl }}" data-id="{{ field.name }}" target="_blank" {% if not isUrl %}download="{{ shortFileName }}"{% endif %}>{{ shortFileName }}</a>
            &nbsp;-&nbsp;
            <label class="btn btn-sm btn-default">
                <i class="fa fa-pencil-alt"></i>
                {{ _t('BAZ_MODIFIER_FICHIER') }}
                {% set style = 'display:none;' %}
                {{ block('inputblock') }}
            </label>
             {% if isAllowedToDeleteFile %}
                <a class="btn btn-sm btn-danger" href="{{ deleteUrl }}"
                   onClick="javascript:return confirm('{{ _t('BAZ_CONFIRMATION_SUPPRESSION_FICHIER') }}');">
                    {{- _t('BAZ_SUPPRIMER') -}}
                </a>
             {% else %}
                <button class="btn btn-sm btn-danger" disabled="disabled"
                    data-toggle="tooltip" data-placement="bottom" title="{{ _t('BAZ_DROIT_INSUFFISANT') }}">
                    <i class="fa fa-trash"></i>
                    {{ _t('BAZ_SUPPRIMER') }}
                </button>
            {% endif %}
            <br />
            <input
                type="hidden"
                name="{{ field.propertyName }}"
                value="{{ value }}"
            />
        {% else %}
            <div class="file-url-tabs">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#{{ field.propertyName }}-upload" aria-controls="{{ field.propertyName }}-upload" role="tab" data-toggle="tab">
                            <i class="fa fa-upload"></i> {{ _t('BAZ_UPLOAD_FILE') }}
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#{{ field.propertyName }}-url" aria-controls="{{ field.propertyName }}-url" role="tab" data-toggle="tab">
                            <i class="fa fa-link"></i> {{ _t('BAZ_URL') }}
                        </a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="{{ field.propertyName }}-upload">
                        {% block inputblock %}
                        <input
                            type="file"
                            data-max-size="{{ maxSize }}"
                            id="{{ field.propertyName }}"
                            name="{{ field.propertyName }}"
                            {% if style %}style="{{ style }}"{% endif %}
                            class="form-control yw-file-upload"
                            {% if field.authorizedExts is not empty %}accept="{{field.authorizedExts|join(',')}}"{% endif %}
                            {% if field.required %}required{% endif %}
                        />
                        {% endblock %}
                    </div>
                    <div role="tabpanel" class="tab-pane" id="{{ field.propertyName }}-url">
                        <input
                            type="url"
                            id="{{ field.propertyName }}_url"
                            name="{{ field.propertyName }}_url"
                            class="form-control"
                            placeholder="https://..."
                        />
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
{% endblock %}
