{% extends 'theme-6.html.twig' %}

{# Title #}


{# CSS #}
{% block stylesheets %}
<style>
    textarea {
        height: 350px !important;
    }
</style>
{% endblock %}

{% block row %}
<div class="col-md-12">
    {% if form.success is defined %}
    <div>
        <div id="message" class="alert alert-success">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            {{ form.success.vars.label }}
        </div>
    </div>
    {% endif%}
    <form id="form1" class="form-horizontal" method="POST">


        <section class="panel">
            <header class="panel-heading">
                <h2 class="panel-title">Supprimer un album&nbsp;<span id="spinner" class="fa fa-refresh fa-spin"></span>
                </h2>
            </header>
            <div class="panel-body">
                <div class="form-horizontal form-bordered">
                    {{ form_errors(form) }}

                    {% if not form.album.rendered %}
                    {# start: album #}
                    <div class="form-group">
                        {{ form_label(form.album, 'Nom de l\'album', {'label_attr': {'class': 'col-md-3 control-label'}})
                        }}
                        {{ form_errors(form.album) }}
                        <div class="col-md-9">
                            {{ form_widget(form.album, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    {# end: album #}
                    {% endif %}


                </div>
            </div>
            <footer class="panel-footer">
                {% if not form.save.rendered %}
                <div class="col-md-offset-3">
                    {{ form_widget(form.save, { 'label': 'Supprimer l\'album', 'attr': {'class': 'btn-primary btnSubmit'} }) }}
                </div>
                {% endif %}
            </footer>
        </section>
    </form>
</div>


{% endblock %}





{% block javascripts %}
<script>
    $(document).ready(function () {
        $("#spinner").hide();
        $('#form_save').show();
        $("#form_album").html($("#form_album option").sort(function (a, b) {
            if ((a.text == "Selectionnez un album...") || (b.text ==
                    "Selectionnez un album..."))
                return 0;
            return a.text == b.text ? 0 : a.text.toLowerCase() < b.text.toLowerCase() ?
                -1 : 1
        }))
        $('#form_album  option').filter(function () {
            return ($(this).text() == 'Selectionnez un album...'); //To select Blue
        }).prop('selected', true);

        $("#form_save").click(function () {
            $('#form_save').hide();
            $("#spinner").show();
        });
    });

    $('#form_album').change(function () {
        $("#message").remove();
    });
</script>
{% endblock %}