{% extends "base.html" %}
{% load freeadmin %}

{% block menubar %}
<div data-dojo-type="dijit.MenuBar" id="navMenu">
  <div class="menu_icon" data-dojo-type="dijit.MenuBarItem">
  <p style="font-size: 200%; margin-left: 10px;">Standby Node</p>
  </div>

<div id="failover_menuitem" data-dojo-type="dijit.MenuBarItem" onClick="" class="menu_icon right">
  <div data-dojo-type="dijit.layout.ContentPane" id="failover_status" class="failover_{% if status == "MASTER" %}ok{% elif status == "BACKUP" %}passive{% elif status == "IMPORTING" %}importing{% elif status == "ELECTING" %}electing{% elif status == "ERROR" %}error{% else %}passive{% endif %}"></div>
  <span><span id="failover_status_name" status="{{ status }}">{% if status == "MASTER" %}Active{% elif status == "BACKUP" %}Standby{% else %}{{ status }}{% endif %}</span></span>
</div>
<div id="failoveren_menuitem" data-dojo-type="dijit.MenuBarItem" onClick="" class="menu_icon right">
  <div data-dojo-type="dijit.layout.ContentPane" data-node="{{ node }}" id="failover_disabled"></div>
  <span id="failover_disabled_text">HA Enabled</span>
</div>

</div>
{% endblock %}

{% block dojango_header_extra %}
<script type="text/javascript" src="{{ STATIC_URL }}lib/js/failover.js"></script>
<link rel="stylesheet" href="{{ STATIC_URL }}css/failover.css" type="text/css" />
{% endblock %}

{% block dojango_content %}
<script type="text/javascript">
    require([
        "dojo/ready",
        "dijit/registry",
        "dojo/parser",
        "dojo/fx/easing",
        "dijit/_base/manager",
        "dijit/form/TextBox",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dijit/layout/TabContainer",
        "dijit/Dialog",
        "dijit/MenuBar",
        "dijit/MenuBarItem"
        ], function(ready, registry) {

        ready(function() {
          checkFailoverStatus();
        });
    });
</script>
<div data-dojo-type="dijit.layout.ContentPane" style="width:100%; border-top: 1px solid #eee;" data-dojo-props="doLayout: true, region: 'center'">

<div style="margin: 0 auto; width: 500px; text-align: center;">
{% if ips %}
<h2>Active IP: {% for ip in ips %}{{ ip }}{% if not forloop.last %}, {% endif %}{% endfor %}</h2>
{% endif %}

{% if failover.disabled %}
<div data-dojo-type="dijit.form.Button">
Takeover
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
dijit.byId("takeover_dialog").show();
</script>
</div>

<div data-dojo-type="dijit/Dialog" data-dojo-props="title: 'Takeover'" id="takeover_dialog">

  <form data-dojo-type="dijit/form/Form" method="post" id="failover_form">
    <script type="dojo/event" data-dojo-event="onSubmit" data-dojo-args="e">
        var me = this;
        require([
        "dojo/_base/event"
        ], function(dEvent) {
           if(e) dEvent.stop(e)
           me.doSubmit();
        })
    </script>
    <script type="dojo/method" data-dojo-event="doSubmit">

        var me = this;
        var cancel = dijit.byId("takeover_cancel");
        var ok = dijit.byId("takeover_ok");
        require([
        "dojo/request/xhr",
        "dojo/_base/event"
        ], function(xhr, dEvent) {

           ok.set('disabled', true);
           cancel.set('disabled', true);

           xhr.post('{% url "failover_takeover" %}', {
             handleAs: 'json',
             headers: {"X-CSRFToken": '{{ csrf_token }}'},
             data: {
               password: dijit.byId("id_password").get("value")
             }
           }).then(function(data) {
             if(data.error) {
               dijit.byId("takeover_error").set('content', data.message);
               ok.set('disabled', false);
               cancel.set('disabled', false);
             } else {
               dijit.byId("takeover_dialog").hide();
               window.location = '/';
             }
           });
        });

    </script>

    <div data-dojo-type="dijit/layout/ContentPane" id="takeover_error" style="color: red;"></div>
    {% admin_form form %}

    <div data-dojo-type="dijit.form.Button" id="takeover_ok">
    OK
      <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        var form = dijit.byId("failover_form");
        form.doSubmit();
      </script>
    </div>

    <div data-dojo-type="dijit.form.Button" id="takeover_cancel">
    Cancel
      <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
	 dijit.byId("takeover_error").set('content', '');
         dijit.byId("id_password").set('value', '');
         dijit.byId("takeover_dialog").hide();
      </script>
    </div>
  </form>

</div>
{% elif ask_passphrase %}

<div data-dojo-type="dijit.form.Button">
Unlock
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
dijit.byId("unlock_dialog").show();
</script>
</div>

<div data-dojo-type="dijit/Dialog" data-dojo-props="title: 'Unlock'" id="unlock_dialog">

  <form data-dojo-type="dijit/form/Form" method="post" id="failover_form">
    <script type="dojo/event" data-dojo-event="onSubmit" data-dojo-args="e">
        var me = this;
        require([
        "dojo/_base/event"
        ], function(dEvent) {
           if(e) dEvent.stop(e)
           me.doSubmit();
        })
    </script>
    <script type="dojo/method" data-dojo-event="doSubmit">

        var me = this;
        var cancel = dijit.byId("unlock_cancel");
        var ok = dijit.byId("unlock_ok");
        require([
        "dojo/request/xhr",
        "dojo/_base/event"
        ], function(xhr, dEvent) {

           ok.set('disabled', true);
           cancel.set('disabled', true);

           xhr.post('{% url "failover_unlock" %}', {
             handleAs: 'json',
             headers: {"X-CSRFToken": '{{ csrf_token }}'},
             data: {
               password: dijit.byId("id_password").get("value"),
               passphrase: dijit.byId("id_passphrase").get("value")
             }
           }).then(function(data) {
             if(data.error) {
               dijit.byId("unlock_error").set('content', data.message);
               ok.set('disabled', false);
               cancel.set('disabled', false);
             } else {
               dijit.byId("unlock_dialog").hide();
               window.location = '/';
             }
           });
        });

    </script>

    <div data-dojo-type="dijit/layout/ContentPane" id="unlock_error" style="color: red;"></div>
    {% admin_form unlock_form %}

    <div data-dojo-type="dijit.form.Button" id="unlock_ok">
    OK
      <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        var form = dijit.byId("failover_form");
        form.doSubmit();
      </script>
    </div>

    <div data-dojo-type="dijit.form.Button" id="unlock_cancel">
    Cancel
      <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
	 dijit.byId("unlock_error").set('content', '');
         dijit.byId("id_password").set('value', '');
         dijit.byId("unlock_dialog").hide();
      </script>
    </div>
  </form>

</div>
{% endif %}

</div>
</div>
{% endblock %}