{% extends 'base.html' %}

{% block content %}
<div class="row">
    {% set footer %}
    <button class="btn btn-primary" frmtarget="#form_field_reff_fields">Save Field</button>
    {% endset %}

    {% call widget.gcard(title='Save field', class='col-md-3', footer=footer) %}
    {{ widget.gform('form_field_reff_fields', form, ['name', 'title', 'type', 'weight', 'choiced', 'required']) }}
    {% endcall %}

    {% call widget.gcard(title=field_reff_fields.name + ' field collections', class='col-md-9', body_class='p-0') %}
    <table class="table table-striped">
        <tbody>
            <tr>
                <th style="width: 10px">#</th>
                <th>Name</th>
                <th>Title</th>
                <th>Type</th>
                <th>Weight</th>
                <th>Required</th>
                <th>Created by</th>
                <th>Action</th>
            </tr>
            {% if field_reff_fields.field_refference_fields|length > 0 %}
            {% for formfields in field_reff_fields.field_refference_fields %}
            <tr>
                <td>{{ formfields.id }}</td>
                <td>{{ formfields.name }}</td>
                <td>{{ formfields.title }}</td>
                <td>{{ formfields.type }}</td>
                <td>{{ formfields.weight }}</td>
                <td>{{ formfields.required }}</td>
                <td>{{ field_reff_fields.user.username }}</td>
                <td><a href="{{ url_for('form_builder', action='open', fid=formfields.fid, child_action='edit', cid=formfields.id) }}" title="Edit field refference"><i class="fas fa-edit"></i></a> <a href="{{ url_for('form_builder', action='open', fid=formfields.fid, child_action='delete', cid=formfields.id) }}" title="Delete field refference"><i class="fas fa-trash"></i></a></td>
            </tr>
            {% endfor %}
            {% else %}
            <tr>
                <td colspan="7" align="center">No fields found yet.</td>
            </tr>
            {% endif %}
        </tbody>
    </table>
    {% endcall %}
</div>
{% endblock %}

{% block javascript %}
if($('#type').val() == 'SelectField' || $('#type').val() == 'SelectMultipleField') {
    $('.choiced').show();
}
else {
    $('.choiced').hide();
}
$('#type').bind('change', function() {
    if(this.value == 'SelectField' || this.value == 'SelectMultipleField') {
        $('.choiced').show();
    }
    else {
        $('.choiced').hide();
    }
    return false;
});
{% endblock %}