<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close x-cancel" aria-hidden="true">&times;</button>
        {{#if id}}
        <h3>Edit</h3>
        {{else}}
        <h3>Add</h3>
        {{/if}}
    </div>
        <div class="modal-body">
            <div class="form-horizontal">
                <div id="x-fields"></div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">Qualities</label>

                    <div class="col-sm-5">
                        <div class="controls qualities-controls">
                            <span id="x-qualities"></span>
                        </div>
                    </div>

                    <div class="col-sm-1 help-inline">
                        <i class="icon-nd-form-info" title="Qualities higher in the list are more preferred. Only checked qualities will be wanted."/>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            {{#if id}}
            <button class="btn btn-danger pull-left x-delete">delete</button>
            {{/if}}
            <button class="btn x-cancel">cancel</button>
            <button class="btn btn-primary x-save">save</button>
        </div>
    </div>
</div>