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

{% block body %}
    <div class="page-header">
        <h1>Add Client</h1>
    </div>

    {% form_theme form with ['bootstrap_3_horizontal_layout.html.twig','form/fields.html.twig'] %}

    {{ form_start(form) }}
        {#{{ form_widget(form) }}#}

        {{ form_row(form.name) }}

        {{ form_row(form.agencyId) }}

        {{ form_row(form.ownerUserId) }}

        <div class="form-group">
            {{ form_label(form.allAdvertisers) }}
            <div class="col-xs-3">
                {#<select multiple="multiple" class="form-control" name="client[selectedAdvertisers][]" id="multiselect_to"></select>#}
                {{ form_errors(form.allAdvertisers) }}

                {{ form_widget(form.allAdvertisers, { 'id' : 'multiselect'}) }}
            </div>

            <div class="col-xs-1">
                <button type="button" id="multiselect_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>

                <button type="button" id="multiselect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>

                <button type="button" id="multiselect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>

                <button type="button" id="multiselect_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
            </div>

            {#{{ form_label(form.advertisers) }}#}
            <div class="col-xs-3">
                {{ form_errors(form.advertisers) }}

                {{ form_widget(form.advertisers, { 'id' : 'multiselect_to'}) }}
            </div>

        </div>

        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-2">
                <button type="submit" class="btn btn-default">Save</button>
            </div>
        </div>
    {{ form_end(form) }}

    {% block javascripts %}
        {{ parent() }}
        {% javascripts 'js/multiselect-plugin/js/multiselect.js' %}
            <script src="{{ asset_url }}"></script>
        {% endjavascripts %}

        <script type="text/javascript">
            $('#multiselect').multiselect();
        </script>
    {% endblock %}
{% endblock %}