{% extends 'Default/base.html.twig' %}

{% block title %} {{ 'Media.T21' | trans}} {% endblock %}
{% block breadcrumb1 %} {{ 'Media.T22' | trans}} {% endblock %}
{% block breadcrumb2 %} {{ 'Media.T23' | trans}} {% endblock %}
    {% block stylesheet %}
        {{ parent() }}
        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
    {% endblock %}
{% block content %}
<div class="row">
    <div class="col-md-3 swMain"></div>
    <div class="col-md-6 swMain">
        <div class="row">
            <div class="col-md-12">
                <fieldset>
                    <legend>
                        {{ 'Media.T24' | trans}}
                    </legend>
                    {{ form_start(form, {'attr': {'files' : true, 'method' : 'post', 'enctype':"multipart/form-data", 'id': 'formMedias', 'novalidate': 'novalidate'}}) }}
                    <div class="form-group">
                        <label class="control-label">
                            {{ 'Media.T25' | trans}} <span class="symbol required"></span>
                        </label>
                            {{ form_widget(form.choice, { 'attr': {'class': 'clip-radio radio-primary input-group', 'required' : 'true' }}) }}
                    </div>
                    <div class="form-group">
                        <label class="control-label">
                            {{ 'Media.T26' | trans}} <span class="symbol required"></span>
                        </label>
                        {{ form_widget(form.name, { 'attr': {'class': 'form-control input-group ', 'required' : 'true' , 'placeholder': 'Media.T30' | trans }}) }}
                    </div>
                    <div class="form-group">
                        <p>
                            {{'Media.T27' | trans}} <span class="symbol required"></span>
                        </p>
                        {{ form_widget(form.file, { 'attr': {'class': 'form-control input-group file', 'required' : 'true', 'data-preview-file-type': 'text'  }}) }}
                    </div>
                    <code>** {{'Media.T28' | trans}} **</code>
                    <br/>
                    <br/>
                        {% if app.request.locale == 'ar' %}
                    <div class="form-group pull-left">
                        <button class="btn btn-primary" type="submit" name="add">{{'Media.T29' | trans}}</button>
                    </div>
                        {% else %}
                    <div class="form-group pull-right">
                    <button class="btn btn-primary" type="submit" name="add">{{'Media.T29' | trans}}</button>
                        {% endif %}
                    </div>
                    {{ form_end(form) }}
                </fieldset>
            </div>
        </div>
    </div>
</div>

{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/js/plugins/piexif.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/js/plugins/sortable.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/js/plugins/purify.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/js/fileinput.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/js/locales/fr.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/js/locales/fr.js"></script>

    <script src="{{ asset('assets/total-task/app/medias/media.js') }}"></script>
    <script type="text/javascript">
        $("#input-id").fileinput();
        // with plugin options
        $("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});


    </script>

{% endblock %}