<div id="edit-backend-popup" 
     class="mid-popup" 
     data-role="popup" 
     data-theme="a" 
     data-overlay-theme="b"
     data-transition="pop">

    <div data-role="header" data-theme="b">
        <h1>Edit backend</h1>
    </div>

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

        {{view Mist.TextField valueBinding="Mist.backendEditController.newBackendTitle"}}

        <div data-role="fieldcontain">
            <select id="backend-toggle" data-role="slider" {{action "stateToggleSwitched" target="view" on="change"}}>
                <option value="0">Disabled</option>
                <option value="1">Enabled</option>
            </select>
            <span class="state">{{Mist.backendEditController.backend.state}}</span>
        </div>

        <input type="button" value="Delete" {{action "deleteClicked" target="view" on="click"}} />

        <div id="backend-delete-confirm">
            <label>Confirm backend removal?</label>
            <label id="monitoring-message">There are monitored machines.<br />Monitoring for these will be disabled</label>
            <div class="ok-cancel" data-role="controlgroup" data-type="horizontal">
                <a data-role="button" id="button-confirm-disable" {{action "yesClicked" target="view"}}>Yes</a>
                <a data-role="button" data-theme="d" {{action "noClicked" target="view"}}>No</a>
            </div>
        </div>

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

        <a href="#" data-role="button" class="button-back" {{action "backClicked" target="view"}}>Back</a>
    </div>
</div>
