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

{% block title %} Modifier Media {% endblock %}
{% block breadcrumb1 %} Modifier Media {% endblock %}
{% block breadcrumb2 %} Modifier {% endblock %}
    {% block stylesheet %}
        {{ parent() }}
        <link rel="stylesheet " href="{{ asset('assets/total-task/css/validate-form.css') }}">
        <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">
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
        <!-- 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>
    {% 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>
                            Modifier Media
                        </legend>
                        {{ form_start(form, {'attr': {'id': '', 'novalidate': 'novalidate'}}) }}
                        <div class="form-group">

                            <div class="">
                                {{ form_widget(form.choice, { 'attr': {'class': 'clip-radio radio-primary input-group', 'required' : 'true' }}) }}

                            </div>
                        </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">
                            <label>
                                Selectionnez  un fichier
                            </label>
                            {{ form_widget(form.file, { 'attr': {'class': 'form-control file', 'required' : '', 'data-preview-file-type': 'text',  }}) }}
                        </div>

                        <div class="form-group pull-right">

                            <button class="btn btn-primary" type="submit" name="add">
                                Modifier
                            </button>
                        </div>
                        {{ form_end(form) }}
                    </fieldset>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
{#    <script src="{{ asset('assets/total-task/js/old-validate-form.js') }}"></script>#}
    <script type="text/javascript">
        // initialize with defaults
        $("#input-id").fileinput();

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

    </script>

{% endblock %}