{% use "bootstrap_4_horizontal_layout.html.twig" %}

{% block file_widget %}
    {% apply spaceless %}
        <div class="input-group">
            <div class="custom-file custom-file-primary">
                <input	 {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}
                        type="file"
                           data-file-ext="jpg, png, gif, JPG, PNG, GIF"
                           data-file-max-size-kb-per-file="30000"
                           data-file-ext-err-msg="Dozwolone typy plików:"
                           data-file-size-err-item-msg="Plik za duży!"
                           data-file-size-err-total-msg="Plik za duży!"
                           data-file-toast-position="bottom-center"
                           data-file-preview-container=".js-file-input-preview-single-container{{ id|slice(0,id|length-4) }}"
                           data-file-preview-img-height="auto"
                           data-file-preview-show-info="false"
                           data-file-btn-clear=".js-file-upload-clear{{ id|slice(0,id|length-4) }}"
                        data-file-preview-img-height="120"
                           class="custom-file-input"
                           id="inputGroupFile02">
                <label class="custom-file-label" for="inputGroupFile02">Wybierz plik</label>
            </div>
        </div>
    {% endapply %}
{% endblock %}

{% block showimage_widget %}
        {% apply spaceless %}
            <div class="row">
                <div class="col-6">
                    <input class="form-control" type="text" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %} readonly="readonly">
                </div>
                <div class="col-6">
                    <span class="{% if not value %}hide{% endif%} js-file-upload-clear{{ id}} btn btn-danger w-100"
                          onclick="$('#{{ id }}').val('');$('#im{{ id }}').remove();">
                    Usuń
                </span>
                </div>
            </div>

            <div class="js-file-input-preview-single-container{{ id }} ml--n6 mr--n6">
                <span data-id="0" data-file-name="{{ value }}" class="js-file-input-item d-inline-block position-relative overflow-hidden text-center show-hover-container shadow-md m-2 rounded" style="min-width: 100%; min-height: 100%; width: auto; height: auto;">
                <img src="{{ value }}" id="im{{ id }}" height="300"/>
                </span>
            </div>

        {% endapply %}

{% endblock %}




{% block showVideo_widget %}
    {% if value%}
        {% apply spaceless %}
            <div class="col-md-3">
                <video  preload="auto" loop autoplay muted width="320" height="240">                            
                    <source src='{{value}}' type='video/mp4'/>
                </video>            
            </div>
            <div class="col-md-9">
                <input class="form-control" type="text" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %} readonly=""> 
                <button type="button" class="btn btn-danger" onclick="jQuery(this).prev('input').val('');
                    jQuery(this).prev().find('img').hide();">Usuń</button>
            </div>
        {% endapply %}
    {% else %}
        -brak zdjęcia-
    {%endif%}
{% endblock %}

{% block checkbox_widget %}
    {% apply spaceless %}

        <label class="form-switch form-switch-pill form-switch-primary d-block">
            <input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
            <i data-on="&#10004;" data-off="&#10005;"></i>
            <span>{{ label }}</span>
        </label>

    {% endapply %}
{% endblock checkbox_widget %}