{% extends 'my_waf/index.html' %}
{% load i18n static %}

{% block extra_head %} 
    <link rel="stylesheet" type="text/css" href="{% static 'my_waf/rollbacks/rollback_main.css' %}">
    <script>
      let modalText= {
        "apply": {
          "title": '{% trans "RB copy apply" %}',
          "body": '{% trans "RB copy apply body" %}',
        },
        "delete": {
          "title": '{% trans "RB copy delete" %}',
          "body": '{% trans "RB copy delete body" %}',
        },
        "create": {
          "title": '{% trans "RB copy create" %}',
          "body": '{% trans "RB copy create body" %}',
        },
        "diff": {
          "title": '{% trans "RB copy diff" %}',
          "body": '{% trans "RB copy diff body" %}',
        },
      }
    </script>
    <script src="{% static 'my_waf/rollbacks/rollback_main.js' %}"></script>
{% endblock %}

{% block content %}
  <div role="tabpanel" class="tab-pane fade active in content" id="tab_rollback">
  
    <div class="main-container">
      <!-- Радиогруппа -->

        <ul class="nav nav-tabs horizontal-tabs" id="key_select" style="margin-bottom: 16px;">
          {% for key in lic_keys %}
            <li data-index="{{ forloop.counter }}" class="nav-item horizontal-item {% if forloop.counter == 1 %} active {% endif %}" data-key-id="{{key.id}}">
              <a class="nav-link horizontal-item-link" data-toggle="tab" aria-expanded="true" href="#tab_{{ key.id }}">
                {{ key.description }}
              </a>
            </li>
          {% endfor %}
        </ul>

      <h1 class="main-section__title">{% trans "RB Page Title" %}</h1>
      {% for key in lic_keys %}
        {% if forloop.counter == 1 %}
          {% include "my_waf/rollback/module_table.html" with key=key class="in active" %}
        {% else %}
          {% include "my_waf/rollback/module_table.html" with key=key %}
        {% endif %}
      {% endfor %}
    </div>
  </div>
{% endblock %}

{% block modals %}
<div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="dataModalLabel" data-backdrop="true" data-keyboard="true">
  <div class="modal-dialog rb__modal-dialog" role="document">
    <div class="rb__modal-content">

      <div class="rb__modal-header">
        <h4 class="rb__modal-title" id="dataModalLabel"></h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть" style="position: relative; top: -6px;">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      
      <div class="rb__modal-body" id="modalContent">
        <div class="spinner"></div>
        <p class="rb__modal-text" id="modalText"></p>
      </div>

      <div class="rb__modal-footer">
        <button type="button" class="cabinet-btn cabinet-btn-primary" id="confirmBtn">{% trans "RB modal apply" %}</button>
        <button type="button" class="cabinet-btn cabinet-btn-secondary" data-dismiss="modal">{% trans "RB modal reject" %}</button>
      </div>
    </div>
  </div>
</div>

<div class="alert" alert>
  <p alert-message></p>
</div>

<p class="backup__list_empty hidden" backup-empty-template>{% trans "RB No Copies Available" %}</p>

<div class="backup__item hidden" backup-template>
  <div class="backup__item-container">
      <div class="backup__description">
          <div class="backup__name">{% trans "RB copy timestamp" %}</div>
          <div class="backup__comment-wrapper">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.08317 15.8333H6.6665C3.33317 15.8333 1.6665 15 1.6665 10.8333V6.66663C1.6665 3.33329 3.33317 1.66663 6.6665 1.66663H13.3332C16.6665 1.66663 18.3332 3.33329 18.3332 6.66663V10.8333C18.3332 14.1666 16.6665 15.8333 13.3332 15.8333H12.9165C12.6582 15.8333 12.4082 15.9583 12.2498 16.1666L10.9998 17.8333C10.4498 18.5666 9.54984 18.5666 8.99984 17.8333L7.74984 16.1666C7.6165 15.9833 7.30817 15.8333 7.08317 15.8333Z" stroke="#666666" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M5.8335 6.66663H14.1668" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M5.8335 10.8334H10.8335" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>

              <p class="backup__comment" comment></p>

              <button class="backup__comment-open hidden" type="button" data-toggle="collapse" data-target>
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 7.5L10 12.5L15 7.5" stroke="#666666" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
          </div>

          <div class="backup__comment-extra collapse" data-comment-extra>
              <p class="backup__comment-full"></p>
          </div>

      </div>
      <div class="backup__buttons">

          <button class="cabinet-btn cabinet-btn-icon" type="button" title="{% trans 'RB copy apply' %}" modal-apply>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.48734 12.6408C10.9898 11.9816 12.8332 9.70663 12.8332 6.99996C12.8332 3.77996 10.2432 1.16663 6.99984 1.16663C3.109 1.16663 1.1665 4.40996 1.1665 4.40996M1.1665 4.40996V1.74996M1.1665 4.40996H2.339H3.7565" stroke="#285283" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M1.1665 7C1.1665 10.22 3.77984 12.8333 6.99984 12.8333" stroke="#285283" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="3 3"/>
              </svg>
          </button>

          <button class="cabinet-btn cabinet-btn-icon" type="button" title="{% trans 'RB copy delete' %}" modal-delete>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.8335 6.41663V9.91663" stroke="#285283" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M8.1665 6.41663V9.91663" stroke="#285283" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M11.0832 3.5V11.6667C11.0832 11.9761 10.9603 12.2728 10.7415 12.4916C10.5227 12.7104 10.2259 12.8333 9.9165 12.8333H4.08317C3.77375 12.8333 3.47701 12.7104 3.25821 12.4916C3.03942 12.2728 2.9165 11.9761 2.9165 11.6667V3.5" stroke="#285283" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M1.75 3.5H12.25" stroke="#285283" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M4.6665 3.49996V2.33329C4.6665 2.02387 4.78942 1.72713 5.00821 1.50833C5.22701 1.28954 5.52375 1.16663 5.83317 1.16663H8.1665C8.47592 1.16663 8.77267 1.28954 8.99146 1.50833C9.21025 1.72713 9.33317 2.02387 9.33317 2.33329V3.49996" stroke="#285283" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
          </button>

          <button class="cabinet-btn cabinet-btn-icon" type="button" title="{% trans 'RB copy diff' %}" modal-diff>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.0801 6.09586L12.2501 3.92584L10.0801 1.75586" stroke="#134473" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M1.75 3.92578H12.25" stroke="#134473" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M3.91998 7.90417L1.75 10.0742L3.91998 12.2442" stroke="#134473" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M12.25 10.0742H1.75" stroke="#134473" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
          </button>
      </div>
  </div>
</div>
{% endblock %}