<div id="dialog-tags" class="mist-dialog" data-role="popup" data-overlay-theme="a">
    <div data-role="header">
        <h1>Manage Tags</h1>
    </div>
    <div data-role="content" data-theme="c">
        <div id="tags-container">
            <table id="tag-input">
                <tr>
                    <td>
                        {{view Mist.TagTextField valueBinding="view.tag"}}
                    </td>
                    <td id="tag-add-wrapper">
                        <a id="tag-add"
                            data-role="button"
                            data-theme="b"
                            {{bindAttr class="view.disabledClass view.machine.pendingAddTag"}}
                            {{action submit target="view"}}>Add</a>
                    </td>
                </tr>
            </table>

            <div class="ajax-loader"></div>

            <div id="tags-wrapper">
                <ul id="tags-list">
                {{#each view.machine.tags}}
                    {{#view Mist.DeleteTagView tagBinding="this" machineBinding="view.machine"}}
                            <a data-role="button"
                                data-theme="c"
                                data-icon="delete"
                                data-inline="true"
                                data-iconpos="notext"
                                {{bindAttr class=":tag-button view.machine.pendingDeleteTag"}}
                                {{action deleteTag target="view"}}></a>
                            {{this}}
                    {{/view}}
                {{/each}}
                </ul>
            </div>
        </div>
        <a id="tag-back" data-rel="back" data-role="button" data-theme="c">Back</a>
    </div>
</div>

