{# vim: ts=2:sw=2:et:ft=twig #}
{% from 'modules/backup_mgr/macros.html' import help_popover %}
{% from 'modules/backup_mgr/restore.html' import restore %}
{% from 'modules/backup_mgr/settings.html' import settings %}

<div id="loading-div">
  <div><i class="fa fa-spin fa-spinner"></i></div>
</div>

{% include 'modules/backup_mgr/modals.html' %}

<!-- article section -->
<div class="alert alert-info">
  <p>{{ langmod.BAKMGR_INFO }}</p>
  <p>{{ langmod.BAKMGR_INFO2 }}
    {% if not mod.bakmgr.is_child %}
      {{ langmod.BAKMGR_INFO3 }}
    {% endif %}
  </p>
  {% if not mod.bakmgr.is_child %}
    <p>{{ langmod.INFO_LINK1 }}
      <a href="{{ langmod.URL_KB_MAIN }}" target="_blank">{{ langmod.INFO_LINK2 }}</a>
    </p>
    {% if mod.bakmgr.is_vps %}
      <p>{{ langmod.HA_INFO_LINK1 }}
        <a href="{{ langmod.URL_KB_VPS_SNAPSHOTS }}" target="_blank">{{ langmod.HA_INFO_LINK2 }}</a>
        {{ langmod.HA_INFO_LINK3 }}
      </p>
    {% endif %}
  {% endif %}
</div>

<span id="restore_queue_timer" class="hidden" data-dur="15"></span>
<span id="homedir-size" class="hidden" data-homedir-size="{{ mod.bakmgr.home_size_mb }}"></span>

<!-- current usage section -->
<div id="current-usage-top">
  <div class="row">
    <strong>{{ langmod.SPACE_REQURED_LABEL }}</strong>
    <span class="text-nowrap">
      <span id="total_gb" data-quota-mb="{{ mod.bakmgr.quota_mb }}" data-srv-unused="{{ mod.bakmgr.svr_quota - mod.bakmgr.svr_usage }}">?</span>GB
      (<span id="avail_gb">?</span><span id="avail_denominator">/{{ (mod.bakmgr.quota_mb / 1024)|round(2) }}</span><span id="avail_lbl">{{ langmod.GB_REMAIN }}</span>)
    </span>
    {{ help_popover(langmod.RETENTION_HELP|replace({'%RETAIN_NUM%': mod.bakmgr.retention})) }}
    <div id="over-quota-hover">
      <span id="over-quota-glyph" class="glyphicon glyphicon-exclamation-sign"></span>
    </div>
    <div class="progress">
      <div class="total-selected-bar progress-bar" role="progressbar" style="width: 0%"></div>
    </div>
    {% if not mod.bakmgr.is_child %}
    <a class="btn btn-sm btn-primary" href="{{ langmod.URL_AMP }}" target="_blank">{{ langmod.PURCHASE_BTN }}</a>
    {% endif %}
  </div>
  {% if mod.bakmgr.is_main_user %}
    <div class="row">
      <strong>{{ langmod.SVR_TOTAL }}</strong>
      {{ (mod.bakmgr.svr_usage / 1024)|round(2) }}/{{ (mod.bakmgr.svr_quota / 1024)|round(2) }}GB
      {{ help_popover(langmod.SVR_TOTAL_INFO) }}
      <div class="progress">
        <div id="svr-total-bar" class="progress-bar" role="progressbar" style="width: 0%"
          data-svr-quota="{{ mod.bakmgr.svr_quota }}" data-svr-usage="{{ mod.bakmgr.svr_usage }}">
        </div>
      </div>
    </div>
  {% endif %}
</div>

<div class="row" id="total-over-quota-warning">
  <!-- additional warning that displays if over quota -->
  <div class="alert alert-warning">
    <i class="glyphicon glyphicon-exclamation-sign"></i>
    <p><strong>{{ langmod.WARNING }}:</strong>{{ langmod.ACCT_OVER_QUOTA }}</p>
  </div>
</div>
<div class="row" id="total-incalculable-warning">
  <!-- additional warning that displays if total quota is '?' -->
  <div class="alert alert-warning">
    <i class="glyphicon glyphicon-exclamation-sign"></i>
    <p class="incalculable-warning-p"><strong>{{ langmod.WARNING }}:</strong>{{ langmod.HOME_INCALCULABLE }}</p>
  </div>
</div>

{% if mod.bakmgr.down_error %}
  <div id="nodes-down-error" class="row alert alert-danger">
    <i class="glyphicon glyphicon-exclamation-sign"></i>
    <p>{{ mod.bakmgr.down_error  }}</p>
  </div>
{% endif %}

<ul class="nav nav-tabs">
  <!-- make the navigation tabs -->
  <li class="nav-item active">
    <a id="nav-link-restore" class="nav-link" data-toggle="tab" href="#restore_tab">{{ langmod.TAB_RESTORE }}</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings_tab">{{ langmod.TAB_SETTINGS }}</a>
  </li>
  {% if mod.bakmgr.has_children %}
    <!-- only shown for resellers with at least one child -->
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#child_tab">{{ langmod.TAB_CHILD }}</a>
    </li>
  {% endif %}
</ul>

<div class="tab-content">
  <!-- bodies of the navigation tabs -->
  <div id="restore_tab" class="tab-pane active" data-home-path="{{ mod.bakmgr.home_path }}">
    <!-- restore tab body -->

    <div id="restore_queue_div">
      <p><strong>{{ langmod.RESTORE_QUEUE_TITLE }}</strong></p>
      <div id="restore_queue"></div>
    </div>

    <div class="row accordion_legend">
      <!-- legend row that shows above the restore tab's accordion -->
      <div class="col-sm-3">
        <h4>{{ langmod.BACKUP_TYPE }}</h4>
      </div>
    </div>
    <div class="panel-group" id="restore_accordion" data-show-geo="{{ mod.bakmgr.show_geo }}" data-geo-loc="{{ mod.bakmgr.geo_info.location }}" data-cluster-loc="{{ mod.bakmgr.cluster_info.location }}" data-geo-name="{{ mod.bakmgr.geo_info.name }}" data-cluster-name="{{ mod.bakmgr.cluster_info.name }}">
      {{ restore(
        'homedir',
        langmod.HOMEDIR_LABEL,
        mod.bakmgr.home_path,
        mod.bakmgr.completed.homedir|default([]),
        langmod
      ) }}
      {% if mod.bakmgr.user_enable.mysql %}
        {{ restore(
          'mysql',
          langmod.MYSQL_LABEL,
          mod.bakmgr.home_path,
          mod.bakmgr.completed.mysql|default([]),
          langmod
        ) }}
      {% endif %}
      {% if mod.bakmgr.user_enable.pgsql %}
        {{ restore(
          'pgsql',
          langmod.PGSQL_LABEL,
          mod.bakmgr.home_path,
          mod.bakmgr.completed.pgsql|default([]),
          langmod
        ) }}
      {% endif %}
    </div>
  </div>
  <div id="settings_tab" class="tab-pane" data-subpaths='{{ mod.bakmgr.sizes.subpaths|json_encode|raw }}' data-home-items='{{ mod.bakmgr.sizes.homedir|json_encode|raw }}'>
    <div class="row accordion_legend">
      <!-- legend row that shows above the settings tab's accordion -->
      <div class="col-sm-3"><h4>{{ langmod.BACKUP_TYPE }}</h4></div>
      <div class="col-sm-3 text-center"><h4>{{ langmod.SCHEDULE }}</h4></div>
      <div class="col-sm-3 text-center"><h4>{{ langmod.DATA_BACKED_UP }}</h4></div>
      <div class="col-sm-3 text-right"><h4>{{ langmod.CURRENT_BACKUP_USAGE }}</h4></div>
    </div>
    <div class="panel-group" id="settings_accordion">
      {{ settings(
        'homedir',
        langmod.HOMEDIR_LABEL,
        mod.bakmgr.bak_conf.homedir,
        mod.bakmgr.completed.homedir|default([]),
        mod.bakmgr,
        langmod
      ) }}
      {% if mod.bakmgr.user_enable.mysql %}
        {{ settings(
          'mysql',
          langmod.MYSQL_LABEL,
          mod.bakmgr.bak_conf.mysql,
          mod.bakmgr.completed.mysql|default([]),
          mod.bakmgr,
          langmod
        ) }}
      {% endif %}
      {% if mod.bakmgr.user_enable.pgsql %}
        {{ settings(
          'pgsql',
          langmod.PGSQL_LABEL,
          mod.bakmgr.bak_conf.pgsql,
          mod.bakmgr.completed.pgsql|default([]),
          mod.bakmgr,
          langmod
        ) }}
      {% endif %}
    </div>
  </div>
  {% if mod.bakmgr.has_children %}
    <!-- only shown for resellers with at least one child -->
    <div id="child_tab" class="tab-pane">
      {% include 'modules/backup_mgr/childaccts.html' %}
    </div>
  {% endif %}
</div>