{{#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 style="width: 86px;">
                                    <i class="ace-icon fa fa-file-image-o"></i>
                                    Image
                                </th>
                                <th>
                                    <i class="ace-icon fa fa-sticky-note-o bigger-110 hidden-480"></i>
                                    Description
                                </th>
                                <th style="width: 106px;">
                                    <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-previews images=image.url}}
                                </td>
                                <td>
                                    {{editable-cell model=image field='note' post-url='application/update-image'}}
                                </td>
                                <td>
                                    {{!image.note}}
                                    <div class="btn-group">
                                    <a class="btn btn-xs btn-danger" data-rel="tooltip" title="Remove" {{action (route-action 'removeImage' image)}}>
                                        <i class="ace-icon fa fa-trash-o"></i>
                                    </a>
                                    {{#if (not-eq model.images.firstObject.id image.id)}}
                                    <a class="btn btn-xs btn-info" 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 btn-success" data-rel="tooltip" title="Move Down" {{action (route-action 'moveDown' image)}}>
                                        <i class="ace-icon fa fa-arrow-down bigger-90"></i>
                                    </a>
                                    {{/if}}
                                    </div>
                                </td>
                            </tr>
                            {{/each}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    {{/form-input}}

    {{form-input-enabled label='Enabled' enabledText='TRUE' disabledText='FALSE'}}
    {{form-input name='note' label='Remark'}}
    {{#if ajax.user.admin}}
    {{form-input-select2 
        nullable=true
        name='owner' 
        label='Owner' 
        options=model.users
        value-field='id'
        text-field='name'
        text-exp='$.employeeId ($.name)'
    }}
    {{/if}}
    <hr />
    {{form-footer-buttons type='update'}}
{{/form-content}}

{{#if model.addImage}}
    {{#modal-dialog title='Add Image' no-cancel=true submit=(route-action 'submitAddImage') on-close=(route-action 'closeAddImage') close-to-parent=false}}
        {{#form-content form-id=(concat 'form_' model.id)}}
            {{input type='hidden' name='applicationId' value=model.id}}
            {{#form-input name='note' label='Description'}}
                {{input name='note' value=model.image.note class='col-xs-12'}}
            {{/form-input}}
            {{#form-input name='image' label='Image'}}
                {{image-input name='image' image=model.image}}
            {{/form-input}}
        {{/form-content}}
    {{/modal-dialog}}
{{/if}}