{% extends "::base.html.twig" %}

{% block collection_widget %}
{% spaceless %}
    {% if prototype is defined %}
        {% set attr = attr|merge({'data-prototype': block('collection_item_widget') }) %}
    {% endif %}
    {% set attr = attr|merge({'data-allow-add': allow_add ? 1 : 0}) %}
    {% set attr = attr|merge({'data-allow-remove': allow_delete ? 1 : 0 }) %}
    {% set attr = attr|merge({'data-name-prefix': full_name}) %}
    <table class="table table-condensed table-striped splits-collection" {{ block('widget_attributes') }}>
        <thead>
            <tr>
                <td style="color: red;">Area of Expertise</td><td>Notes</td>
                <td></td>
            </tr>
        </thead>
        <tbody>
            {% for rows in form %}
            <tr class="item">
                <td>{{ form_widget(rows.areaOfExpertise) }}{{ form_errors(rows.areaOfExpertise) }}</td>
                <td>{{ form_widget(rows.notes) }}{{ form_errors(rows.speakingLevel) }}</td>
                <td>
                    <a href="#" class="collection-remove btn btn-default btn-xs" title="Delete"><span class="glyphicon glyphicon-trash"></span></a>
                    <a href="#" class="collection-add btn btn-default btn-xs" title="Add"><span class="glyphicon glyphicon-plus-sign"></span></a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
{% endspaceless %}
{% endblock collection_widget %}

{% block collection_item_widget %}
{% spaceless %}
<tr class="item">
    <td>{{ form_widget(prototype.areaOfExpertise) }}{{ form_errors(prototype.areaOfExpertise) }}</td>
    <td>{{ form_widget(prototype.notes) }}{{ form_errors(prototype.notes) }}</td>
    <td>
        <a href="#" class="collection-remove btn btn-default btn-xs" title="Delete"><span class="glyphicon glyphicon-trash"></span></a>
        <a href="#" class="collection-add btn btn-default btn-xs" title="Add"><span class="glyphicon glyphicon-plus-sign"></span></a>
    </td>
</tr>
{% endspaceless %}
{% endblock collection_item_widget %}

{% block button_widget %}
{% spaceless %}
    {% if label is empty %}
    {% set label = name|humanize %}
    {% endif %}
    <button type="{{ type|default('button') }}" {{ block('button_attributes') }}>{{ label|title|trans({}, translation_domain) }}</button>
    {% if add_cancel_btn %}
    <a class="btn btn-default btn-sm pull-right space-buttons" href="{{ app.request.headers.get('referer') }}">{{ cancel_label|title }}</a>
    {% endif %}
    <button id="add_split" data-collection="splits" class="collection-action collection-add btn btn-success btn-sm pull-right space-buttons add-btn"><span class="glyphicon glyphicon-plus-sign"></span> Expertise</button>
    {% if add_antispam_button %}
    <button type="submit" {{ block('antispam_button_attributes') }}>
        {{ antispam_label|title }}
    </button>
    {% endif %}
{% endspaceless %}
{% endblock button_widget %}

{% form_theme form _self %}
{% form_theme form.expertise 
    'AlsuiteAssetsBundle:Form:collection-theme.html.twig'
    _self
%}

{% block title 'Add Expertise' %}
    
{% block content %}
<h4 style="font-weight: 350;">{{ expert.firstname ~ ' ' ~ expert.lastname }}</h4>
<div class="panel panel-primary" style="margin-top: -2px;">
    <div class="panel-heading">
        <div class="col-lg-7 center center-text">
            <span class="label">Add Expertise</span>
        </div>
    </div>
    <div class="panel-body">
        {{ form_start(form) }}
        <div class="panel panel-primary" style="margin-top: 3px;">
            <div class="panel-heading">
                <div class="col-lg-7 center center-text">
                    <span class="label">
                        To add expertise, click 
                        <span class="glyphicon glyphicon-plus-sign"></span> Expertise
                    </span>
                </div>
            </div>
            <div id="splits" class="panel-body" style="padding: 0px 15px;">
                {{ form_row(form.expertise) }}
            </div>
            <div class="panel-footer">
                {{ form_end(form) }}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script type="text/javascript">
    $(document).ready(function() {
        $('.splits-collection').collection({
            allow_up: false,
            allow_down: false, 
            elements_selector: 'tr.item',
            elements_parent_selector: '%id% tbody',
            custom_add_location: true, 
            after_add: function(collection, element) { 
                return $('select').select2(); 
            }
        });
        
        var splits = $('.splits-collection tbody tr').length;
        if (splits === 0) {
            $('#add_split').click();
        }
    });
</script>
{% endblock %}