{% 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 actblocks-collection" style="margin: 0px;" {{ block('widget_attributes') }}>
        <colgroup>
            <col style="width: 40%;"/><col style="width: 50%;"/><col style="width: 50%;"/>
            <col style="width: available;"/>
        </colgroup>
        <thead>
            <tr>
                <td>Output</td><td class="loud">Details</td><td>Action</td>
            </tr>
        </thead>
        <tbody>
            {% for rows in form %}
            <tr {% if rows.vars.value.id is not null %}class="hidden"{% else %}class="item"{% endif %}>
                <td>{{ form_widget(rows.output) }}{{ form_errors(rows.output) }}</td>
                <td>{{ form_widget(rows.details) }}{{ form_errors(rows.details) }}</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.output) }}{{ form_errors(prototype.output) }}</td>
    <td>{{ form_widget(prototype.details) }}{{ form_errors(prototype.details) }}</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_line" data-collection="actblocks" class="collection-action collection-add btn btn-success btn-sm pull-right space-buttons add-btn"><span class="glyphicon glyphicon-plus-sign"></span> Block</button>
    {% if add_antispam_button %}
    <button type="submit" {{ block('antispam_button_attributes') }}>
        {{ antispam_label|title }}
    </button>
    {% endif %}
{% endspaceless %}
{% endblock button_widget %}

{% block title 'Add/Edit Activity Blocks' %}
    
{% form_theme form _self %}
{% form_theme form.activityBlocks 
    'AlsuiteAssetsBundle:Form:collection-theme.html.twig'
    _self
%}

{% block content %}
<div class="panel panel-primary">
    <div class="panel-heading">
        <div class="col-lg-3 center center-text">
            <span class="label">Add/Edit Activity Blocks</span>
        </div>
    </div>
    <div class="panel-body">
        {{ form_start(form) }}
        {# {{ form_row(form.output) }} #}
        <div class="panel panel-default" style="margin-top: 5px;">
            <div class="panel-heading">
                <div class="col-lg-3 center center-text">
                    To add Activity Blocks, click 
                    <span class="glyphicon glyphicon-plus-sign"></span> Block
                </div>
            </div>
            <div id="actblocks" class="col-md-12">
                {{ form_row(form.activityBlocks) }}
            </div>
        </div>
        {{ form_end(form) }}
    </div>
</div>
{% endblock %}

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