{{#if view.machine.hasMonitoring}}
    <a href="#"
        class="monitoring-button"
        data-role="button"
        data-icon="delete"
        data-theme="a"
        {{action "openMonitoringDialog" target="view"}}>Disable</a>
{{else}}
    <a href="#"
        class="monitoring-button"
        data-role="button"
        data-icon="star"
        data-theme="b"
        {{action "openMonitoringDialog" target="view"}}>Enable</a>
{{/if}}

<div data-role="popup" id="monitoring-dialog" class="mist-dialog" data-overlay-theme="a">
    <div data-role="header">
        {{#if view.machine.hasMonitoring}}
            <h1>Disable monitoring</h1>
        {{else}}
            <h1>Enable monitoring</h1>
        {{/if}}
    </div>
    <div data-role="content" data-theme="b">
        {{#if Mist.authenticated}}
            {{#if view.machine.hasMonitoring}}
                <span>Are you sure you wish to disable monitoring for {{name}}?</span>

                {{#unless hasKey}}
                <p>The collectd daemon can't be disabled automactically because there is no key pair set.</p>
                <p>To do it manually run the following commands:</p>
                <pre>chmod -x /etc/init.d/collectd &amp;&amp; killall -9 collectd</pre>
                {{/unless}}

                <div class="btn-full ok-cancel" data-role="controlgroup" data-type="horizontal">
                    <button data-theme="c" {{action "backClicked" target="view"}}>Back</button>
                    <button data-theme="b" {{action "changeMonitoringClicked" target="view"}}>Disable</button>
                </div>
            {{else}}
                <div>Are you sure you wish to enable monitoring for {{name}}?</div>

                {{#unless hasKey}}
                <p>The collectd daemon can't be installed automatically because there is no key pair set.</p>
                <p>You will have to configure it manually by following the instructions after pressing enable.</p>
                {{/unless}}

                <div class="btn-full ok-cancel" data-role="controlgroup" data-type="horizontal">
                    <button data-theme="c" {{action "backClicked" target="view"}}>Back</button>
                    <button data-theme="b" {{action "changeMonitoringClicked" target="view"}}>Enable</button>
                </div>
            {{/if}}
        {{else}}
            <div class="info">In order to proceed you need to login to the premium <a href="https://mist.io">mist.io</a> service.</div>

            <label for="email">Email</label>
            {{view Mist.TextField valueBinding="Mist.email" name="email" id="email"}}

            <label for="password">Password</label>
            {{view Mist.TextField type="password" valueBinding="Mist.password" name="password" id="password"}}

            <div class="btn-full ok-cancel" data-role="controlgroup" data-type="horizontal">
                <button data-theme="c" {{action "backClicked" target="view"}}>Back</button>
                <button id="auth-ok" data-theme="b" {{action "changeMonitoringClicked" target="view"}}>Login</button>
            </div>
        {{/if}}

    </div>
</div>
