{% 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; width: 20%;">Tracking Type</td>
                <td style="color: red; width: 25%;">Details</td>
                <td style="color: red; width: 10%;">Weight</td>
                <td style="width: 10%;">Baseline</td>
                <td style="width: 10%;">Target</td>
                <td style="width: 15%;">SP Indicator</td>
                <td></td>
            </tr>
        </thead>
        <tbody>
            {% for rows in form %}
            <tr class="item">
                <td>{{ form_widget(rows.trackingType) }}{{ form_errors(rows.trackingType) }}</td>
                <td>{{ form_widget(rows.details) }}{{ form_errors(rows.details) }}</td>
                <td>{{ form_widget(rows.weight) }}{{ form_errors(rows.weight) }}</td>
                <td>{{ form_widget(rows.baseline) }}{{ form_errors(rows.baseline) }}</td>
                <td>{{ form_widget(rows.target) }}{{ form_errors(rows.target) }}</td>
                <td>{{ form_widget(rows.spIndicator) }}{{ form_errors(rows.spIndicator) }}</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.trackingType) }}{{ form_errors(prototype.trackingType) }}</td>
    <td>{{ form_widget(prototype.details) }}{{ form_errors(prototype.details) }}</td>
    <td>{{ form_widget(prototype.weight) }}{{ form_errors(prototype.weight) }}</td>
    <td>{{ form_widget(prototype.baseline) }}{{ form_errors(prototype.baseline) }}</td>
    <td>{{ form_widget(prototype.target) }}{{ form_errors(prototype.target) }}</td>
    <td>{{ form_widget(prototype.spIndicator) }}{{ form_errors(prototype.spIndicator) }}</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> Indicator</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.indicators 
    'AlsuiteAssetsBundle:Form:collection-theme.html.twig'
    _self
%}

{% block title 'Add Indicators' %}
    
{#{% block submenu %}
    {{ include('AlsuiteBackendBundle:BreadCrumbs:experts.html.twig') }}
{% endblock %}#}
    
{% block content %}
<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 Indicators</span>
        </div>
    </div>
        <table class="table table-bordered table-condensed" style="{{ tbl_margin }}">
            <tbody>
                <tr><th>Output</th><td>{{ output.output }}</td></tr>
                <tr><th>Outcome</th><td>{{ output.outcome.outcome }}</td></tr>
                <tr><th>Project</th><td>{{ output.getProject().name }}</td></tr>
            </tbody>
        </table>
        {{ 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 an indicator, click 
                        <span class="glyphicon glyphicon-plus-sign"></span> Indicator
                    </span>
                </div>
            </div>
            <div id="splits" class="panel-body" style="padding: 0px 15px;">
                {{ form_row(form.indicators) }}
            </div>
            <div class="panel-footer">
                {{ form_end(form) }}
            </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 %}