{{#when field.type '===' 'text'}}
    <input
        autocomplete="{{name}}"
        class="form-control"
        name="{{../@key}}[{{@key}}]"
        type="text"
        value="{{scope ../../item ../@key @key}}"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    />
{{/when}}
{{#when field.type '===' 'email'}}
    <input
        autocomplete="email"
        class="form-control"
        name="{{../@key}}[{{@key}}]"
        type="email"
        value="{{scope ../../item ../@key @key}}"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    />
{{/when}}
{{#when field.type '===' 'password'}}
    <input
        autocomplete="password"
        class="form-control"
        name="{{../@key}}[{{@key}}]"
        type="password"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    />
{{/when}}
{{#when field.type '===' 'search'}}
    <input
        autocomplete="search"
        class="form-control"
        name="{{../@key}}[{{@key}}]"
        type="search"
        value="{{scope ../../item ../@key @key}}"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    />
{{/when}}
{{#when field.type '===' 'url'}}
    <input
        autocomplete="url"
        class="form-control"
        name="{{../@key}}[{{@key}}]"
        type="url"
        value="{{scope ../../item ../@key @key}}"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    />
{{/when}}
{{#when field.type '===' 'color'}}
    <input
        autocomplete="color"
        class="form-control"
        name="{{../@key}}[{{@key}}]"
        type="color"
        value="{{scope ../../item ../@key @key}}"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    />
{{/when}}
{{#when field.type '===' 'mask'}}
    <input
        autocomplete="{{name}}"
        class="form-control"
        data-do="mask-field"
        name="{{../@key}}[{{@key}}]"
        type="text"
        value="{{scope ../../item ../@key @key}}"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    />
{{/when}}
{{#when field.type '===' 'slug'}}
    <input
        autocomplete="{{name}}"
        class="form-control"
        data-do="slugger"
        name="{{../@key}}[{{@key}}]"
        type="text"
        value="{{scope ../../item ../@key @key}}"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    />
{{/when}}
{{#when field.type '===' 'textarea'}}
    <textarea
        class="form-control"
        name="{{../@key}}[{{@key}}]"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    >{{{scope ../../item ../@key @key}}}</textarea>
{{/when}}
{{#when field.type '===' 'wysiwyg'}}
    <textarea
        class="form-control"
        data-do="wysiwyg"
        name="{{../@key}}[{{@key}}]"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    >{{{scope ../../item ../@key @key}}}</textarea>
{{/when}}
{{#when field.type '===' 'markdown'}}
    <textarea
        class="form-control"
        data-do="markdown-editor"
        name="{{../@key}}[{{@key}}]"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    >{{{scope ../../item ../@key @key}}}</textarea>
{{/when}}
{{#when field.type '===' 'code'}}
    <textarea
        class="form-control hidden"
        data-do="code-editor"
        name="{{../@key}}[{{@key}}]"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    >{{{scope ../../item ../@key @key}}}</textarea>
{{/when}}
{{#when field.type '===' 'number'}}
    <input
        autocomplete="{{name}}"
        class="form-control"
        name="{{../@key}}[{{@key}}]"
        type="number"
        value="{{scope ../../item ../@key @key}}"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    />
{{/when}}
{{#when field.type '===' 'small'}}
    <input
        autocomplete="{{name}}"
        class="form-control"
        max="9"
        min="0"
        name="{{../@key}}[{{@key}}]"
        step="1"
        type="number"
        value="{{scope ../../item ../@key @key}}"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    />
{{/when}}
{{#when field.type '===' 'range'}}
    <input
        class="irs-hidden-input"
        data-do="multirange-field"
        name="{{../@key}}[{{@key}}]"
        tabindex="-1"
        type="hidden"
        value="{{scope ../../item ../@key @key}}"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    />
{{/when}}
{{#when field.type '===' 'float'}}
    <input
        autocomplete="{{name}}"
        class="form-control"
        name="{{../@key}}[{{@key}}]"
        type="number"
        value="{{scope ../../item ../@key @key}}"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    />
{{/when}}
{{#when field.type '===' 'price'}}
    <input
        autocomplete="{{name}}"
        class="form-control"
        name="{{../@key}}[{{@key}}]"
        step="0.01"
        type="number"
        value="{{scope ../../item ../@key @key}}"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    />
{{/when}}
{{#when field.type '===' 'date'}}
    <input
        aria-haspopup="true"
        aria-expanded="false"
        class="form-control date"
        data-do="date-field"
        name="{{../@key}}[{{@key}}]"
        type="text"
        value="{{scope ../../item ../@key @key}}"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    />
{{/when}}
{{#when field.type '===' 'time'}}
    <input
        aria-haspopup="true"
        aria-expanded="false"
        class="form-control date"
        data-do="time-field"
        name="{{../@key}}[{{@key}}]"
        type="text"
        value="{{scope ../../item ../@key @key}}"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    />
{{/when}}
{{#when field.type '===' 'datetime'}}
    <input
        aria-haspopup="true"
        aria-expanded="false"
        class="form-control date"
        data-do="datetime-field"
        name="{{../@key}}[{{@key}}]"
        type="text"
        value="{{scope ../../item ../@key @key}}"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    />
{{/when}}
{{#when field.type '===' 'week'}}
    <input
        class="form-control"
        name="{{../@key}}[{{@key}}]"
        type="week"
        value="{{scope ../../item ../@key @key}}"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    />
{{/when}}
{{#when field.type '===' 'month'}}
    <input
        class="form-control"
        name="{{../@key}}[{{@key}}]"
        type="month"
        value="{{scope ../../item ../@key @key}}"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    />
{{/when}}
{{#when field.type '===' 'checkbox'}}
    <input
        name="{{../@key}}[{{@key}}]"
        type="hidden"
        value="0"
    />
    <label class="checkbox checkbox-2">
        <input
            name="{{../@key}}[{{@key}}]"
            type="checkbox"
            value="1"
            {{#when ../../item ../@key @key '==' 1}}checked{{/when}}
            {{#each field.attributes}}
                {{@key}}="{{this}}"
            {{/each}}
        />
        <span>{{field.attributes.placeholder}}</span>
    </label>
{{/when}}
{{#when field.type '===' 'switch'}}
    <input
        name="{{../@key}}[{{@key}}]"
        type="hidden"
        value="0"
    />
    <label class="switch switch-1">
        <input
            name="{{../@key}}[{{@key}}]"
            type="checkbox"
            value="1"
            {{#when ../../item ../@key @key '==' 1}}checked{{/when}}
            {{#each field.attributes}}
                {{@key}}="{{this}}"
            {{/each}}
        />
        <span>{{field.attributes.placeholder}}</span>
    </label>
{{/when}}
{{#when field.type '===' 'knob'}}
    <input
        class="form-control"
        data-do="knob-field"
        name="{{../@key}}[{{@key}}]"
        type="text"
        value="{{scope ../../item ../@key @key}}"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    />
{{/when}}
{{#when field.type '===' 'select'}}
    <select
        class="form-control"
        name="{{../@key}}[{{@key}}]"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    >
        {{#each field.options}}
            <option
                value="{{./key}}"
                {{#when ../../../item ../../@key ../@key '==' key}}selected{{/when}}
            >
                {{value}}
            </option>
        {{/each}}
    </select>
{{/when}}
{{#when field.type '===' 'multiselect'}}
    <select
        class="form-control"
        data-do="select-field"
        multiple="multiple"
        name="{{../@key}}[{{@key}}][]"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    >
        {{#each field.options}}
            <option
                value="{{./key}}"
                {{#in ../../../item ../../@key ../@key key}}selected{{/in}}
            >
                {{value}}
            </option>
        {{/each}}
    </select>
{{/when}}
{{#when field.type '===' 'checkboxes'}}
    <div{{#each field.attributes}} {{@key}}="{{this}}"{{/each}}>
        {{#each field.options}}
            <label class="checkbox checkbox-2">
                <input
                    name="{{../../@key}}[{{../@key}}][]"
                    type="checkbox"
                    value="{{./key}}"
                    {{#in ../../../item ../../@key ../@key ./key}}checked{{/in}}
                />
                <span>{{value}}</span>
            </label>
        {{/each}}
    </div>
{{/when}}
{{#when field.type '===' 'radios'}}
    <div{{#each field.attributes}} {{@key}}="{{this}}"{{/each}}>
        {{#each field.options}}
            <label class="radio radio-2">
                <input
                    name="{{../../@key}}[{{../@key}}]"
                    type="radio"
                    value="{{./key}}"
                    {{#when ../../../item ../../@key ../@key '==' key}}checked{{/when}}
                />
                <span>{{value}}</span>
            </label>
        {{/each}}
    </div>
{{/when}}
{{#when field.type '===' 'file'}}
    <table
        class="table table-striped file-field"
        data-do="file-field"
        data-name="{{../@key}}[{{@key}}]"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    >
        <thead>
            <tr>
                <th>Preview</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            {{#scope ../../item ../@key}}
                <tr class="file-field-none" style="display:none;">
                    <td colspan="5">
                        <div class="alert alert-info">No File Selected</div>
                    </td>
                </tr>
                <tr class="file-field-item" data-index="{INDEX}">
                    <td class="file-field-preview">
                        {{#fileinfo this}}
                            {{#in 'jpg,jpeg,png,gif' extension}}
                                <div class="file-field-preview-container">
                                    <img src="{{../this}}" height="50" />
                                </div>
                            {{else}}
                                <div class="file-field-preview-container">
                                    <i class="fas fa-file text-info"></i>
                                    <span class="file-field-extension">{{extension}}</span>
                                </div>
                            {{/in}}
                        {{/fileinfo}}
                    </td>
                    <td class="file-field-name">
                        {{this}}
                        <input name="{{../@key}}" type="hidden" value="{{this}}" />
                    </td>
                </tr>
            {{else}}
                <tr class="file-field-none">
                    <td colspan="5">
                        <div class="alert alert-info">No File Selected</div>
                    </td>
                </tr>
            {{/scope}}
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">
                    <button
                        class="file-field-upload btn btn-info"
                        type="button"
                    >
                        Choose File
                    </button>
                </td>
            </tr>
        </tfoot>
    </table>
{{/when}}
{{#when field.type '===' 'files'}}
    <table
        class="table table-striped file-field"
        data-do="file-field"
        data-name="{{../@key}}[{{@key}}]"
        data-multiple="1"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    >
        <thead>
            <tr>
                <th>Preview</th>
                <th>Name</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {{#scope ../../item ../@key}}
                {{#if this.length}}
                    {{#each this}}
                        <tr class="file-field-none" style="display:none;">
                            <td colspan="5">
                                <div class="alert alert-info">No Files Selected</div>
                            </td>
                        </tr>
                        <tr class="file-field-item" data-index="{{@index}}">
                            <td class="file-field-preview">
                                {{#fileinfo this}}
                                    {{#in 'jpg,jpeg,png,gif' extension}}
                                        <div class="file-field-preview-container">
                                            <img src="{{../this}}" height="50" />
                                        </div>
                                    {{else}}
                                        <div class="file-field-preview-container">
                                            <i class="fas fa-file text-info"></i>
                                            <span class="file-field-extension">{{extension}}</span>
                                        </div>
                                    {{/in}}
                                {{/fileinfo}}
                            </td>
                            <td class="file-field-name">
                                {{this}}
                                <input name="{{../../@key}}" type="hidden" value="{{this}}" />
                            </td>
                            <td class="file-field-actions">
                                <a class="text-info file-field-move-up" href="javascript:void(0)">
                                    <i class="fas fa-arrow-up"></i>
                                </a>
                                &nbsp;&nbsp;&nbsp;'
                                <a class="text-info file-field-move-down" href="javascript:void(0)">
                                    <i class="fas fa-arrow-down"></i>
                                </a>
                                &nbsp;&nbsp;&nbsp;'
                                <a class="btn btn-danger file-field-remove" href="javascript:void(0)">
                                    <i class="fas fa-times"></i>
                                </a>
                            </td>
                        </tr>
                    {{/each}}
                {{else}}
                    <tr class="file-field-none">
                        <td colspan="5">
                            <div class="alert alert-info">No Files Selected</div>
                        </td>
                    </tr>
                {{/if}}
            {{else}}
                <tr class="file-field-none">
                    <td colspan="5">
                        <div class="alert alert-info">No Files Selected</div>
                    </td>
                </tr>
            {{/scope}}
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">
                    <button
                        class="file-field-upload btn btn-info"
                        type="button"
                    >
                        Choose Files
                    </button>
                </td>
            </tr>
        </tfoot>
    </table>
{{/when}}
{{#when field.type '===' 'image'}}
    <table
        class="table table-striped file-field"
        data-accept="image/png,image/jpg,image/jpeg,image/gif"
        data-do="file-field"
        data-name="{{../@key}}[{{@key}}]"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    >
        <thead>
            <tr>
                <th>Preview</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            {{#scope ../../item ../@key}}
                <tr class="file-field-none" style="display:none;">
                    <td colspan="5">
                        <div class="alert alert-info">No File Selected</div>
                    </td>
                </tr>
                <tr class="file-field-item" data-index="{INDEX}">
                    <td class="file-field-preview">
                        {{#fileinfo this}}
                            {{#in 'jpg,jpeg,png,gif' extension}}
                                <div class="file-field-preview-container">
                                    <img src="{{../this}}" height="50" />
                                </div>
                            {{else}}
                                <div class="file-field-preview-container">
                                    <i class="fas fa-file text-info"></i>
                                    <span class="file-field-extension">{{extension}}</span>
                                </div>
                            {{/in}}
                        {{/fileinfo}}
                    </td>
                    <td class="file-field-name">
                        {{this}}
                        <input name="{{../@key}}" type="hidden" value="{{this}}" />
                    </td>
                </tr>
            {{else}}
                <tr class="file-field-none">
                    <td colspan="5">
                        <div class="alert alert-info">No Image Selected</div>
                    </td>
                </tr>
            {{/scope}}
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">
                    <button
                        class="file-field-upload btn btn-info"
                        type="button"
                    >
                        Choose Image
                    </button>
                </td>
            </tr>
        </tfoot>
    </table>
{{/when}}
{{#when field.type '===' 'images'}}
    <table
        class="table table-striped file-field"
        data-accept="image/png,image/jpg,image/jpeg,image/gif"
        data-do="file-field"
        data-name="{{../@key}}[{{@key}}]"
        data-multiple="1"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    >
        <thead>
            <tr>
                <th>Preview</th>
                <th>Name</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {{#scope ../../item ../@key}}
                {{#if this.length}}
                    {{#each this}}
                        <tr class="file-field-none" style="display:none;">
                            <td colspan="5">
                                <div class="alert alert-info">No Images Selected</div>
                            </td>
                        </tr>
                        <tr class="file-field-item" data-index="{{@index}}">
                            <td class="file-field-preview">
                                {{#fileinfo this}}
                                    {{#in 'jpg,jpeg,png,gif' extension}}
                                        <div class="file-field-preview-container">
                                            <img src="{{../this}}" height="50" />
                                        </div>
                                    {{else}}
                                        <div class="file-field-preview-container">
                                            <i class="fas fa-file text-info"></i>
                                            <span class="file-field-extension">{{extension}}</span>
                                        </div>
                                    {{/in}}
                                {{/fileinfo}}
                            </td>
                            <td class="file-field-name">
                                {{this}}
                                <input name="{{../../@key}}" type="hidden" value="{{this}}" />
                            </td>
                            <td class="file-field-actions">
                                <a class="text-info file-field-move-up" href="javascript:void(0)">
                                    <i class="fas fa-arrow-up"></i>
                                </a>
                                &nbsp;&nbsp;&nbsp;'
                                <a class="text-info file-field-move-down" href="javascript:void(0)">
                                    <i class="fas fa-arrow-down"></i>
                                </a>
                                &nbsp;&nbsp;&nbsp;'
                                <a class="btn btn-danger file-field-remove" href="javascript:void(0)">
                                    <i class="fas fa-times"></i>
                                </a>
                            </td>
                        </tr>
                    {{/each}}
                {{else}}
                    <tr class="file-field-none">
                        <td colspan="5">
                            <div class="alert alert-info">No Images Selected</div>
                        </td>
                    </tr>
                {{/if}}
            {{else}}
                <tr class="file-field-none">
                    <td colspan="5">
                        <div class="alert alert-info">No Images Selected</div>
                    </td>
                </tr>
            {{/scope}}
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">
                    <button
                        class="file-field-upload btn btn-info"
                        type="button"
                    >
                        Choose Images
                    </button>
                </td>
            </tr>
        </tfoot>
    </table>
{{/when}}
{{#when field.type '===' 'tag'}}
    <div
        data-do="tag-field"
        class="tag-field"
        data-name="{{../@key}}[{{@key}}]"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    >
        {{#scope ../../item ../@key}}
            {{#each this}}
                <div class="tag">
                    <input
                        class="tag-input text-field"
                        type="text"
                        name="{{../../../@key}}[{{../../@key}}][]"
                        value="{{this}}"
                    />
                    <a
                        class="remove"
                        href="javascript:void(0)"
                    >
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            {{/each}}
        {{/scope}}
    </div>
{{/when}}
{{#when field.type '===' 'meta'}}
    <div
        data-do="meta-field"
        class="meta-field"
        data-name="{{../@key}}[{{@key}}]"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    >
        <div class="meta-fields">
            {{#scope ../../item ../@key @key}}
                {{#each this}}
                    <div class="meta">
                        <input
                            class="meta-input key"
                            placeholder="{{_ 'Name'}}"
                            type="text"
                            value="{{@key}}"
                        />
                        <input
                            class="meta-input value"
                            type="text"
                            placeholder="{{_ 'Value'}}"
                            value="{{this}}"
                        />
                        <input
                            name="{{../../../@key}}[{{../../@key}}][{{@key}}]"
                            type="hidden"
                            value="{{this}}"
                        />
                        <a
                            class="remove text-danger"
                            href="javascript:void(0)"
                        >
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                {{/each}}
            {{/scope}}
        </div>
        <a class="text-success add-meta">
            <i class="fa fa-plus"></i>
        </a>
    </div>
{{/when}}
{{#when field.type '===' 'multirange'}}
    <input
        class="irs-hidden-input"
        data-do="multirange-field"
        data-type="double"
        name="{{../@key}}[{{@key}}]"
        tabindex="-1"
        type="hidden"
        value="{{scope ../../item ../@key}}"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    />
{{/when}}
{{#when field.type '===' 'rawjson'}}
    <textarea
        class="form-control hidden"
        data-do="code-editor"
        name="{{../@key}}[{{@key}}]"
        {{#each field.attributes}}
            {{@key}}="{{this}}"
        {{/each}}
    >
        {{~#is_array ../../item ../@key @key~}}
            {{~json_encode ../../item ../@key @key~}}
        {{~else~}}
            {{~#scope ../../item ../@key @key~}}
                {{~this~}}
            {{~/scope~}}
        {{~/is_array~}}
    </textarea>
{{/when}}