<div id="single-machine-page" data-role="page" class="ui-page-active" data-theme="c">

    <div data-role="header" data-theme="b">

        <a href="#/machines" class="responsive-button" data-icon="arrow-l">Machines</a>

        <h1>{{name}}</h1>

        {{view Mist.userMenuView}}

    </div>

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

        <span class="single-view-icon-wrapper">
            <span id="single-view-provider-icon" {{bind-attr class="view.providerIconClass"}}></span>
        </span>
        <span {{bind-attr class=":single-view-icon-wrapper image.type"}}>
            <span id="single-view-image-icon"></span>
        </span>

        <h1 {{bind-attr class="view.machine.state"}}>{{state}}</h1>

        {{#unless view.machine.id}}
            {{#if Mist.backendsController.loadingMachines}}
                <div class="ajax-loader"></div>
            {{/if}}
        {{/unless}}

        <span class="ui-btn-right" id="mist-manage-keys">
            {{#if pendingCreation}}
                <a class="ui-state-disabled" data-role="button" data-icon="plus" data-iconpos="right">Add key</a>
            {{else}} {{#if keysCount}}
                <a data-role="button" {{action "manageKeysClicked" target="view"}}>{{keysCount}} keys</a>
            {{else}}
                <a data-role="button"
                   data-theme="d"
                   data-icon="plus"
                   data-iconpos="right"
                   data-mini="false"
                   {{action "addKeyClicked" target="view"}}>Add key</a>
            {{/if}}{{/if}}
        </span>
    </div>

    <div data-role="content" data-theme="c">

        <!--

             Info popups

        -->


        {{#if enablingMonitoring}}
        {{#unless pendingMonitoring}}
        <div class="single-machine-loader ui-loader ui-corner-all ui-body-a ui-loader-verbose">
            <span class="ui-icon ui-icon-loading"></span>
            <h1>Enabling monitoring. Please wait</h1>
        </div>
        {{/unless}}
        {{/if}}

        {{#if disablingMonitoring}}
        <div class="single-machine-loader ui-loader ui-corner-all ui-body-a ui-loader-verbose">
            <span class="ui-icon ui-icon-loading"></span>
            <h1>Disabling monitoring. Please wait</h1>
        </div>
        {{/if}}

        {{#if pendingStats}}
        <div class="single-machine-loader ui-loader ui-corner-all ui-body-a ui-loader-verbose">
            <span class="ui-icon ui-icon-loading"></span>
            <h1>Fetching stats...</h1>
        </div>
        {{/if}}

        <!--

             Monitoring collapsible

        -->

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

            <h3>Monitoring</h3>

            {{#if hasMonitoring}}

            {{#unless pendingMonitoring}}

                {{#if pendingFirstData}}
                <div class="single-machine-loader ui-loader ui-corner-all ui-body-a ui-loader-verbose">
                    <span class="ui-icon ui-icon-loading"></span>
                    <h1>Waiting for data</h1>
                </div>
                {{/if}}

                {{view Mist.monitoringView}}

                <div class="rules-container" data-role="listview">
                    {{#each view.rules}}
                        {{view Mist.ruleView ruleBinding="this"}}
                    {{/each}}

                    {{#if Mist.rulesController.creationPending}}
                    <div class="rule-box" id="creation-rule">
                        <div class="ajax-loader"></div>
                    </div>
                    {{/if}}
                </div>

                <div id="monitoring-bottom-btns">
                <div data-rule="ui-grid-a">
                    <div class="ui-block-a">
                        <a id="add-rule-button"
                            class="ui-btn ui-corner-all ui-btn-d ui-btn-icon-left ui-icon-plus"
                            {{action "addRuleClicked" target="view"}}>Add Rule</a>
                    </div>
                    <div class="ui-block-b">
                        <a id="disable-monitor-btn"
                        class="ui-btn ui-corner-all ui-btn-b ui-btn-icon-left ui-icon-delete"
                            {{action "disableMonitoringClicked" target="view"}}>Disable</a>
                    </div>
                </div>
                </div>

            {{/unless}}

            {{else}}

                <div class="monitoring-dialog-container" id="monitoring-disabled">

                    <div id="enable-monitoring-bundle">
                        <div>Monitoring is currently disabled</div>

                        <a id="enable-monitor-btn"
                           class="ui-btn ui-corner-all ui-btn-d ui-btn-icon-left ui-icon-star"
                           {{action "enableMonitoringClicked" target="view"}}>Enable</a>

                       {{#if Mist.machineManualMonitoringController.gettingCommand}}
                            <div class="ajax-loader"></div>
                       {{/if}}
                    </div>

                </div>

            {{/if}}

        </div>

        <!--

             Information collapsibles

        -->

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

            <h3>Basic Info</h3>

            <table class="info-table">
                <tr>
                    <td>Last probed</td>
                    <td> {{#if probing}}
                             probing... <div class="ajax-loader"></div>
                         {{else}}
                             {{view.lastProbe}}
                             <button id="machine-probe-btn"
                                    data-theme="a"
                                    data-mini="true"
                                    {{action "probeClicked" target="view"}}>Probe</button>
                         {{/if}}
                    </td>
                </tr>
                </tr>
                {{#if probed}}
                <tr>
                    <td>Up and running for</td>
                    <td>{{view.upFor}}</td>
                </tr>
                {{/if}}
                {{#if loadavg}}
                <tr>
                    <td>Load</td>
                    <td>
                        <div class="loadleds">

                            <div {{bind-attr class="loadavg15 :led"}}>
                            </div>
                            <div {{bind-attr class="loadavg5 :led"}}>
                            </div>
                            <div {{bind-attr class="loadavg1 :led"}}>
                            </div>
                        </div>
                        {{loadavg}} - {{loadavg5}}
                    </td>
                </tr>
                {{/if}}
                {{#if latency}}
                <tr>
                    <td>Latency</td>
                    <td>
                        <div {{bind-attr class=":netleds"}}>
                            <div {{bind-attr class="netled4 :netled1"}}>
                            </div>
                            <div {{bind-attr class="netled3 :netled2"}}>
                            </div>
                            <div {{bind-attr class="netled2 :netled3"}}>
                            </div>
                            <div {{bind-attr class="netled1 :netled4"}}>
                            </div>
                        </div>
                        {{latency}}ms</td>
                </tr>
                {{/if}}
                {{#if loss}}
                <tr>
                    <td>Packet loss</td>
                    <td>{{loss}}</td>
                </tr>
                {{/if}}
                {{#if tags}}
                <tr>
                    <td>Tags</td>
                    <td>
                        {{#each tags}}
                        <span class="tag">{{this}}</span>
                        {{/each}}
                    </td>
                </tr>
                {{/if}}

                {{#each view.basicInfo}}
                <tr>
                    <td>{{key}}</td>
                    <td>{{value}}</td>
                </tr>
                {{/each}}
            </table>
        </div>

        {{#if view.metadata}}
        <div id="single-machine-metadata" data-role="collapsible">

            <h3>Full metadata list</h3>

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

        </div>
        {{/if}}

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

    </div>

    {{view Mist.messageboxView}}

    {{view Mist.machineKeysView}}

    {{view Mist.machineTagsView}}

    {{view Mist.machineShellView}}

    {{view Mist.machinePowerView}}

    {{view Mist.confirmationDialog}}

    {{view Mist.machineManualMonitoringView}}

    <div id="manual-monitoring-popup" class="mid-popup" data-role="popup" data-transition="popp"
         data-overlay-theme="b" data-disimissible="false">

        <div data-role="header" data-theme="b">
            <h1>Manual collectd installation</h1>
        </div>

        <div data-role="content" data-theme="c">

            <p>Run these commands on your server:</p>
            <textarea>Command here...</textarea>
            <a data-role="button" {{action "closeManualMonitoringPopup" target="view"}}>Back</a>
        </div>
    </div>

    <!--
       TODO: These should be in monitoring view
    -->

    <div class="rule-metric-popup"data-role="popup">
        <ul data-role="listview">
            {{#each Mist.rulesController.metricList}}
            <li data-icon="false">
                <a {{bind-attr title="this"}}>{{this}}</a>
            </li>
            {{/each}}
        </ul>
    </div>

    <div class="rule-operator-popup" data-role="popup">
        <ul data-role="listview">
            {{#each Mist.rulesController.operatorList}}
            <li data-icon="false">
                <a {{bind-attr title="this.title"}}>{{this.symbol}}</a>
            </li>
            {{/each}}
        </ul>
    </div>

    <div class="rule-action-popup" data-role="popup">
        <ul data-role="listview">
            {{#each Mist.rulesController.actionList}}
            <li data-icon="false">
                <a {{bind-attr title="this"}}>{{this}}</a>
            </li>
            {{/each}}
            <li class="ui-state-disabled" data-icon="false">
                <a>launch</a>
            </li>
        </ul>
    </div>

    <div class="rule-command-popup large-popup" data-role="popup">
        <div data-role="header">
            <h1>Command</h1>
        </div>
        <div data-role="content">
            {{view Ember.TextArea
                valueBinding="Mist.rulesController.command"
                name="rule-command-content"}}
            <div data-role="controlgroup" class="btn-full ok-cancel" data-type="horizontal">
                <a data-role="button" data-theme="c" data-rel="back">Back</a>
                <a data-role="button" data-theme="b" {{action saveCommand target="Mist.rulesController"}}>Save</a>
            </div>
        </div>
    </div>

    <!--
       These ^^^^^^^
    -->

    <div class="tri-action-footer" data-role="footer" data-theme="b">
        <table><tbody><tr><td>
            <a id="single-machine-tags-btn" data-role="button" data-icon="grid"{{action "tagsClicked" target="view"}}>Tags</a>
        </td><td>
            <a id="single-machine-shell-btn" data-role="button" data-icon="gear" {{action "shellClicked" target="view"}}>Shell</a>
        </td><td>
            <a id="single-machine-power-btn" data-role="button" data-icon="power" {{action "powerClicked" target="view"}}>Power</a>
        </td></tr></tbody></table>
    </div>

</div>
