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

{% block file_widget %}
    {% apply spaceless %}
        <div class="mb-3 row">

            <input type="file"
                    {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}
                   class="form-control mb-3"
                   name="contact[attachment]" onchange="jQuery(this).next('input').val(this.value);" />

            <input type="text" class="form-control" placeholder="Nie wybrano pliku" readonly=""/>

        </div>
    {% endapply %}
{% endblock %}

{% block show_plik_widget %}
    {% if value%}
        {% apply spaceless %}
            <div class="mb-3 row">
                <a href="{{value}}" >{{ value }}</a>
            </div>
            <div class="col-md-9">
                <input class="form-control" type="text" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %} readonly="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 show_image_widget %}
    {% if value%}
        {% apply spaceless %}
            <div class="thumbnail col-md-3">
                <img src="{{value}}" style="width:400px;" alt="">
            </div>
            <div class="col-md-9">
                <input class="form-control" type="text" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %} readonly="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 show_image_file_widget %}
    {% if value%}
        {% apply spaceless %}
            <div class="col-md-3">
                <img src="{{path('ufile',{'subkat': value|url_encode})}}" style="width:400px;" alt="" >
            </div>
            <div class="col-md-9">
                <input class="form-control" type="text" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %} readonly="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 show_video_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 %}