{% extends 'base.html' %}

{% block content %}
<div class="row">
    {{ widget.gorillaml_custom_form(metadata) }}
    {% 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.form_reference_fields|length > 0 %}
            {% for formfields in field_reff_fields.form_reference_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 reference"><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 reference"><i class="fas fa-trash"></i></a></td>
            </tr>
            {% endfor %}
            {% else %}
            <tr>
                <td colspan="8" align="center">No fields found yet.</td>
            </tr>
            {% endif %}
        </tbody>
    </table>
    {% endcall %}
</div>
{% endblock %}

{% block javascript %}
var myCodeMirror = CodeMirror.fromTextArea(document.getElementById('choiced'), {
    lineNumbers: true,
    styleActiveLine: true,
    matchBrackets: true
});
var choiced_textarea = $('textarea[name="choiced"]');
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 %}