{varType FuzeWorks\Forms\Form $form}
{varType FuzeWorks\Forms\Field $field}
<div class="row">
    <div class="col-12">
        <!-- Custom Tabs -->
        <div class="card">
            <div class="card-header d-flex p-0">
                <h3 class="card-title p-3">{$config['name']}</h3>
                <ul class="nav nav-pills ml-auto p-2">
                    {ifset $config['data']}
                        <li class="nav-item">
                            <a class="nav-link active" href="#data" data-toggle="tab">Data</a>
                        </li>
                    {/ifset}
                    <li class="nav-item"><a class="nav-link {$config['data'] ? '' : 'active'}" href="#raw" data-toggle="tab">Raw</a></li>
                </ul>
            </div><!-- /.card-header -->
            <div class="card-body">
                <div class="tab-content">
                    {foreach $form->getFields() as $field}
                        {switch get_class($field)}
                            {case "FuzeWorks\Forms\Fields\HiddenField", "FuzeWorks\Forms\Fields\SubmitField"}
                            {$field|noescape}
                            {case "FuzeWorks\Forms\Fields\CheckboxField"}
                            <div class="form-check">
                                {$field->addClass("form-check-input")|noescape}
                        <label for="{$field->getId()}" class="form-check-label">{$field->getLabel()}</label>
                        {if $field->isValidated() && !$field->isValid()}
                                    <small class="text-danger">{$field->getErrors()|implode}</small>
                                {/if}
                            </div>
                        {default}
                            <div class="form-group">
                                <label for="{$field->getId()}">{$field->getLabel()}</label>
                                {if $field->isValidated() && !$field->isValid()}
                                    {$field->class(["form-control", "is-invalid"])|noescape}
                                    <small class="text-danger">{$field->getErrors()|implode}</small>
                                {elseif $field->isValidated() && $field->isValid()}
                                    {$field->class(["form-control", "is-valid"])|noescape}
                                {else}
                                    {$field->addClass("form-control")|noescape}
                                {/if}
                            </div>
                        {/switch}
                    {/foreach}
                    <div class="tab-pane {$config['data'] ? '' : 'active'}" id="raw">
                        <textarea disabled style="min-width: 100%; height: 100%" oninput='resizeRawArea(this)'>{$config['raw']}</textarea>
                    </div>
                    <!-- /.tab-pane -->
                </div>
                <!-- /.tab-content -->
            </div><!-- /.card-body -->
        </div>
        <!-- ./card -->
    </div>
    <!-- /.col -->
</div>
<script>
    function resizeRawArea(jq_in) {
        jq_in.style.height = "";
        jq_in.style.height = jq_in.scrollHeight + 3 + "px";
    }
</script>