<div data-role="header">

    <a href="#"
        data-icon="arrow-l"
        data-direction="reverse"
        {{action backClicked target="view"}}>Machines</a>

    <h1 id="single-machine-name">{{name}}</h1>

    {{view Mist.UserMenuView}}

</div>

<div class="single-view-header">

    <h3 class="single-view-name">{{name}}</h3>

    <span class="single-view-icon-wrapper">
        <span id="single-view-provider-icon" {{bindAttr class="view.providerIconClass"}}></span>
    </span>

    <span {{bindAttr class=":single-view-icon-wrapper image.type"}}>
        <span id="single-view-image-icon"></span>
    </span>

    <h3 id="single-view-state" {{bindAttr class="state"}}>{{state}}</h3>

</div>

<div data-role="content">

    <div data-role="collapsible" data-collapsed="false">

        <h3>Monitoring</h3>
        <div id="monitoring-wrapper" {{bindAttr class=":ui-btn-inner :ui-corner-top :ui-corner-bottom pendingStats"}}>

            {{#if hasMonitoring}}

            <div id="cpuGraph"></div>
            <div id="loadGraph"></div>
            <div id="networkGraph"></div>
            <div id="diskGraph"></div>
            <div id="memoryGraph"></div>
            <div class="ui-loader ui-corner-all ui-body-a ui-loader-verbose pending-monitoring">
                <span class="ui-icon ui-icon-loading"></span>
                <h1>Disabling monitoring</h1>
            </div>
            <div class="rules-container">
            {{#each Mist.rulesController}}
                {{view Mist.RuleView ruleBinding="this"}}
            {{/each}}
            </div>
            <div {{bindAttr class=":monitoring-dialog-container :enabled state"}}>
                <div class="ajax-loader"></div>
                {{view Mist.MachineMonitoringDialog machineBinding="this"}}
            </div>
            <div class="add-rule-container">
                <button id="add-rule-button"
                    data-icon="plus"
                    data-theme="b"
                    {{action addRuleClicked target="view"}}>Add Rule</button>
            </div>

            {{else}}

            <div {{bindAttr class=":monitoring-dialog-container :disabled state"}}>
                <div class="monitoring-info">Monitoring is currently disabled</div>

                {{view Mist.MachineMonitoringDialog machineBinding="this"}}

                <div class="ui-loader ui-corner-all ui-body-a ui-loader-verbose pending-monitoring">
                    <span class="ui-icon ui-icon-loading"></span>
                    <h1>Enabling monitoring</h1>
                </div>
            </div>

            {{/if}}

        </div>
    </div>

    <div data-role="collapsible" data-collapsed="false">

        <h3>Basic Info</h3>

        <table id="machine-basic-table">

            {{#if tags}}
            <tr>
                <td class="key">Tags</td>
                <td class="value">
                    {{#each tags}}
                    <span class="tag">{{this}}</span>
                    {{/each}}
                </td>
            </tr>
            {{/if}}

            {{#if uptime}}
            <tr>
               <td class="key">Up and running for</td>
               <td class="value">{{view.upFor}}</td>
            </tr>
            {{/if}}

            {{#each view.basicvars}}
            <tr>
               <td class="key">{{key}}</td>
               <td class="value">{{value}}</td>
            </tr>
            {{/each}}

        </table>

    </div>

         <div data-role="collapsible" data-collapsed="false" id="machine-single-keys">
            <h3>Keys</h3>
            <div id="keys-wrapper" class="ui-btn-inner ui-corner-top ui-corner-bottom">
                {{#if keys}}
                <div class="keys-container">
                    {{#each keys}}
                        {{view Mist.MachineKeyListItemView keyBinding="this"}}
                    {{/each}}
                </div>
                {{/if}}

                {{#if restKeys}}
                <div class="associate-key-container">
                    <div>
                    <a id="associate-key-button"
                        data-role="button"
                        data-inline="true"
                        data-icon="plus"
                        data-theme="b"
                        {{bindAttr class="restKeys::ui-disabled"}}
                        {{action associateClicked target="view"}}>Associate</a>
                    </div>
                </div>
                {{/if}}

                <div id="associate-key" data-role="popup">
                    <ul class="key-list" data-role="listview">
                        {{#each restKeys}}
                        <li data-icon="false">
                            <a href="#" {{action keySelect this target="view"}}>{{name}}</a>
                        </li>
                        {{/each}}
                    </ul>
                </div>
            </div>

        </div>

        <div data-role="collapsible">

        <h3>Full metadata list</h3>

        <table id="machine-metadata">
            {{#each view.metadata}}
            <tr>
               <td class="key">{{key}}</td>
               <td class="value">{{value}}</td>
            </tr>
            {{/each}}
        </table>

    </div>

    <div class="bottom-padding"></div>

</div>

<div data-role="popup" id="dialog-confirm" data-transition="pop" class="mist-dialog">
    <div data-role="header">
        <h1 id="dialog-confirm-title">{{Mist.confirmationController.title}}</h1>
    </div>
    {{view Mist.ConfirmationDialog data-role="content"}}
</div>

<div class="machine-footer" data-role="footer" data-theme="a">

    <div class="actions" data-role="controlgroup" data-type="horizontal">
        <a href="#dialog-tags"
            id="machines-button-tags"
            {{bindAttr class=":action-links view.disabledTagClass"}}
            data-role="button"
            data-icon="grid"
            {{action "openTags" target="view"}}>Tag</a>
            {{view Mist.MachineTagsDialog machineBinding="this"}}

        <a href="#dialog-shell"
            id="machines-button-shell"
            {{bindAttr class=":action-links view.disabledShellClass"}}
            data-role="button"
            data-icon="gear"
            {{action "showShell" target="view"}}>Shell</a>
            {{view Mist.ShellDialog machineBinding="this"}}

        <a href="#dialog-single-power"
            id="machines-button-power"
            {{bindAttr class=":action-links view.disabledPowerClass"}}
            data-role="button"
            data-icon="mist-power"
            {{action "showActions" target="view"}}>Power</a>
            {{view Mist.PowerDialog machineBinding="this"}}
    </div>

</div>
