[%
    USE Whostmgr;

    SET transfer_tool_url  = cp_security_token _ '/scripts5/account_copy_input';
    SET update_preferences_url = cp_security_token _ '/scripts2/updateconf';
%]
[% WRAPPER 'master_templates/master.tmpl'
        # js files are loaded in the footer
        scripts = [
            Whostmgr.find_file_url('/libraries/jquery/current/jquery.min.js'),
            '/templates/setupcluster/page.min.js'
        ],
        stylesheets = ['/templates/setupcluster/page.min.css'],
        theme = 'bootstrap'
        app_key = 'configuration_cluster' %]
<div class="row">
    <div class="col-md-8">
        <p class="description">
            [% locale.maketext('Use this interface to link this server to other servers in a configuration cluster.') %]
            [% locale.maketext('You can then copy this server’s configuration settings to the cluster’s servers in [asis,WHM]’s [output,url,_1,Update Preferences,target,_2] interface.', update_preferences_url, "_blank") %]
            [% locale.maketext('When you update a setting, you can choose to copy this server’s changes out to all of its cluster servers.') %]
        </p>
        <p class="description">[% locale.maketext('To import a configuration from a remote server, you must use the [output,url,_1,Transfer Tool,target,_2] interface. You can transfer the following: [list_and_quoted,_3]', transfer_tool_url, "_blank", data.transfer_modules) %]</p>
<div id="formDryDock" class="hidden">
    <table id="tableAlerts">
        <tr id="confirmDelete" class="alert danger hidden">
            <td colspan="4" class="text-center">
                <form id="confirmDeleteForm">
                    <div id="confirmDeleteAlertIcon"><span class="glyphicon glyphicon-question-sign"></span></div>
                    <div id="confirmMessage"></div>
                    <div id="confirmDeleteButtons">
                        <input type="hidden" id="serverToDelete" value="">
                        <button type="button" id="serverDeleteContinueBtn" class="btn btn-xs btn-danger">[% locale.maketext('Continue') %]</button>
                        <button type="button" id="serverDeleteCancelBtn" class="btn btn-xs btn-link">[% locale.maketext('Cancel') %]</button>
                    </div>
                </form>
            </td>
        </tr>
    </table>
</div>
<div id="noticeBox">
    <div id="globalSuccessNotice" class="alert alert-success hidden">
        <span class="glyphicon glyphicon-ok-sign"></span><span id="globalSuccessMessage"></span>
        <button id="hideSuccessAlertBtn" type="button" class="close" aria-hidden="true">&times;</button>
    </div>
    <div id="globalFailureNotice" class="alert alert-danger hidden">
        <span class="glyphicon glyphicon-exclamation-sign"></span><span id="globalFailureMessage"></span>
        <button id="hideFailureAlertBtn" type="button" class="close" aria-hidden="true">&times;</button>
    </div>
    <div id="globalInfoNotice" class="alert alert-warning hidden">
        <span class="glyphicon glyphicon-info-sign" id="validationIcon"></span>
        <span id="globalInfoMessage"></span><button id="hideFailureAlertBtn" type="button" class="close" aria-hidden="true">&times;</button>
    </div>
</div>
<p id="createBtnContainer" class="text-right"><button id="createBtn" type="button" class="btn btn-primary">[% locale.maketext('Create') %]</button></p>
<table class="table table-striped table-hover" id="serverList">
        <thead>
        <tr>
            <th>[% locale.maketext('Server') %]</th>
            <th>[% locale.maketext('User') %]</th>
            <th>[% locale.maketext('API Token') %]</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr id="noLinksDefined"[% IF data.servers.size > 0 %]class="hidden"[% END %]>
            <td colspan="4" class="alert alert-info text-center">
                <span class="glyphicon glyphicon-info-sign"></span>
                <span id="noLinksMessage">
                    [% locale.maketext('No servers are defined for this configuration cluster. Click [output,strong,Create] to add one.') %]
                </span>
            </td>
        </tr>
        [% FOREACH server IN data.servers -%]
            <tr class="serverLink" data-server="[% server.key -%]">
                <td class="serverName">
                    [%- server.key | trim | html -%]
                </td>
                <td class="userName">
                    [%- server.value.user | trim | html -%]
                </td>
                <td class="hashValue">
                    [%- server.value.signature | trim | html -%]
                </td>
                <td class="actions text-right">
                    <button type="button" class="deleteBtn btn-link" title="[% locale.maketext('Delete entry for “[_1]”.', server.key) -%]" >
                        <span class="glyphicon glyphicon-trash"></span>
                    </button>
                    <button type="button" class="manageBtn btn-link" title="[% locale.maketext('Edit entry for “[_1]”.', server.key) -%]">
                        [%- IF locale.get_html_dir_attr() == 'rtl' -%]
                            <span class="glyphicon glyphicon-chevron-left"></span>
                        [%- ELSE -%]
                            <span class="glyphicon glyphicon-chevron-right"></span>
                        [%- END -%]
                    </button>
                </td>
            </tr>
        [% END %]
    </tbody>
</table>
<p id="extraCreateButton" class="text-right"><button id="createBtn2" type="button" class="btn btn-primary">[% locale.maketext('Create') %]</button></p>
<div id="serverLinkEditor" class="hidden">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h4 id="addServerHeadline" class="panel-title">[% locale.maketext('Add Server') %]</h4>
            <h4 id="editServerHeadline" class="panel-title hidden">[% locale.maketext('Edit Server') %]</h4>
        </div>
        <div class="panel-body">
            <form role="form">
                <div class="form-group">
                    <label for="serverNameEditor">[%- locale.maketext('Server') -%]</label>
                    <input type="text" class="form-control" id="serverNameEditor" placeholder="[%- locale.maketext('Server Name or IP Address') -%]">
                </div>
                <div class="form-group">
                    <label for="serverUserEditor">[% locale.maketext('User') %]</label>
                    <input type="text" class="form-control" id="serverUserEditor" value="root" placeholder="[%- locale.maketext('The username for the API token.') -%]">
                </div>
                <div class="form-group">
                    <label for="serverKeyEditor">[%- locale.maketext('API Token') -%]</label>
                    <textarea id="serverKeyEditor" class="form-control" rows="5" placeholder="[%- locale.maketext("Paste the server’s API token here.") -%]" data-gramm_editor="false"></textarea>
                </div>
                <div>
                    <button type="button" class="btn btn-primary" id="serverSaveChanges">[% locale.maketext('Save') %]</button><button type="button" id="goBack" class="btn btn-link">[% locale.maketext('Go Back') %]</button>
                </div>
            </form>
        </div>
    </div>
</div>
</div>
</div>
[% END %]