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

{% block title %} Ajouter Média {% endblock %}
{% block breadcrumb1 %} Ajouter Média {% endblock %}
{% block breadcrumb2 %} Ajout {% 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" />
        <!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below -->
        <!-- link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->
        <!-- the font awesome icon library if using with `fas` theme (or Bootstrap 4.x). Note that default icons used in the plugin are glyphicons that are bundled only with Bootstrap 3.x. -->
        <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>
                        Ajouter Média
                    </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">
                            Type <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">
                            Nom <span class="symbol required"></span>
                        </label>
                        {{ form_widget(form.name, { 'attr': {'class': 'form-control ', 'required' : 'true' , 'placeholder': 'Nom Media' }}) }}
                    </div>
                    <div class="form-group">
                        <p>
                            Sélectionnez votre média <span class="symbol required"></span>
                        </p>
                        {{ form_widget(form.file, { 'attr': {'class': 'form-control file', 'required' : 'true', 'data-preview-file-type': 'text'  }}) }}
                    </div>
                    <div class="form-group pull-right">
                        <button class="btn btn-primary" type="submit" name="add">
                            Ajouter
                        </button>
                    </div>
                    {{ form_end(form) }}
                </fieldset>
            </div>
        </div>
    </div>
</div>

{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <!-- piexif.min.js is needed for auto orienting image files OR when restoring exif data in resized images and when you
        wish to resize images before upload. This must be loaded before fileinput.min.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/js/plugins/piexif.min.js" type="text/javascript"></script>
    <!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview.
        This must be loaded before fileinput.min.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/js/plugins/sortable.min.js" type="text/javascript"></script>
    <!-- purify.min.js is only needed if you wish to purify HTML content in your preview for
        HTML files. This must be loaded before fileinput.min.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/js/plugins/purify.min.js" type="text/javascript"></script>
    <!-- popper.min.js below is needed if you use bootstrap 4.x (for popover and tooltips). You can also use the bootstrap js
       3.3.x versions without popper.min.js. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <!-- bootstrap.min.js below is needed if you wish to zoom and preview file content in a detail modal
        dialog. bootstrap 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
    {#        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>#}
    <!-- the main fileinput plugin file -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/js/fileinput.min.js"></script>
    <!-- following theme script is needed to use the Font Awesome 5.x theme (`fas`) -->

    <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/media.js') }}"></script>
    <script type="text/javascript">
        // initialize with defaults
        $("#input-id").fileinput();

        // with plugin options
        $("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});


    </script>

{% endblock %}