{{#form-content}}
    {{input type='hidden' name='id' value=model.id}}
    {{form-input name='name' label='Name'}}
    {{#form-input name='content' label='Content'}}
        {{wysiwyg-editor model=model name='content'}}
    {{/form-input}}

    {{#form-input label='Images' name='images'}}
        <div class="widget-box transparent" style="opacity: 1;">
            <!-- #section:custom/widget-box.options -->
            <div class="widget-header">
                {{!-- <h5 class="widget-title bigger lighter">
                    <i class="ace-icon fa fa-table"></i>
                    Users
                </h5> --}}
                <div class="widget-toolbar action-buttons">
                    <a href="#" data-rel="tooltip" title="Add Image" {{action (route-action 'addImage')}}>
                        <i class="ace-icon fa fa-plus-circle green"></i>
                    </a>
                </div>
            </div>

            <!-- /section:custom/widget-box.options -->
            <div class="widget-body">
                <div class="widget-main no-padding">
                    <table class="table table-striped table-bordered table-hover">
                        <thead class="thin-border-bottom">
                            <tr>
                                <th>
                                    <i class="ace-icon fa fa-user"></i>
                                    Image
                                </th>
                                <th>
                                    Description
                                </th>
                                <th>
                                    <i class="ace-icon fa fa-cogs bigger-110 hidden-480"></i>
                                    Settings
                                </th>
                            </tr>
                        </thead>

                        <tbody>
                            {{#each model.images as |image|}}
                            <tr>
                                <td>
                                    {{image.id}}
                                </td>
                                <td>
                                    {{editable-cell model=image field='note' post-url='application/update-image'}}
                                </td>
                                <td>
                                    {{!image.note}}
                                    {{#if (not-eq model.images.firstObject.id image.id)}}
                                    <a class="btn btn-xs btn-purple" data-rel="tooltip" title="Move Up" {{action (route-action 'moveUp' image)}}>
                                        <i class="ace-icon fa fa-arrow-up bigger-90"></i>
                                    </a>
                                    {{/if}}
                                    {{#if (not-eq model.images.lastObject.id image.id)}}
                                    <a class="btn btn-xs" data-rel="tooltip" title="Move Down" {{action (route-action 'moveDown' image)}}>
                                        <i class="ace-icon fa fa-arrow-down bigger-90"></i>
                                    </a>
                                    {{/if}}
                                </td>
                            </tr>
                            {{/each}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    {{/form-input}}

    {{#form-input name='image' label='Images'}}
        <div class="widget-box transparent">
            <div class="widget-header widget-header-small">
                <div class="widget-toolbar action-buttons">
                    <a href="#" data-rel="tooltip" title="Add Image" {{action (route-action 'addImage')}}>
                        <i class="ace-icon fa fa-plus-circle green"></i>
                    </a>
                </div>
            </div>
            <div class="widget-body">
                <div class="widget-main padding-4">
                    {{#each model.images as |image i|}}
                    <div class="col-xs-6 no-padding-left">
                        <div class="space-4"></div>
                        {{input name=(concat 'imageTitles[' i ']') class='width-80' placeholder='Image title' value=image.title}}
                        &nbsp;
                        <a href="#" class="red" data-rel="tooltip" title="Remove Image" {{action (route-action 'removeImage' image)}}>
                            <i class="ace-icon fa fa-times bigger-125"></i>
                        </a>
                        <div class="space-2"></div>
                        {{image-input name=(concat 'images[' i ']') image=image}}
                    </div> 
                    {{/each}}
                </div>
            </div>
        </div>
    {{/form-input}}

    {{form-input-enabled label='Enabled' enabledText='TRUE' disabledText='FALSE'}}
    {{form-input name='note' label='Remark'}}
    <hr />
    {{form-footer-buttons type='update'}}
{{/form-content}}