{% extends 'domaincontroll/menu.html' %}
{% load static %}

{% block pageTitle %}
  <title > Редактирование записи </title>
{% endblock %}

{% block menuOpen %}
  <li class="nav-item has-treeview menu-open">
{% endblock %}


{% block jsCode %}
  let id = document.getElementById('DomContrItem6');
  id.classList.add("active");

  let menuItem = document.getElementById('mainItem1');
  menuItem.classList.add("active");

  document.getElementById('nameInput').value=1800;

  let label1 = document.getElementById('label1');
  let label2 = document.getElementById('label2');
  let label3 = document.getElementById('label3');
  let label4 = document.getElementById('label4');
  let label5 = document.getElementById('label5');
  let label6 = document.getElementById('label6');
  let label7 = document.getElementById('label7');

  let labels = document.getElementsByName('labels');
  for (let label of labels) {
    label.style.visibility="visible";
  }

  label1.style.top=document.getElementById('table2').getBoundingClientRect().top-label1.getBoundingClientRect().top + "px";

  //alert(document.getElementById('table2').getBoundingClientRect().top + " и " + label1.getBoundingClientRect().top);

  label2.style.top=document.getElementById('table3').getBoundingClientRect().top-label2.getBoundingClientRect().top + "px";
  label3.style.top=document.getElementById('table4').getBoundingClientRect().top-label3.getBoundingClientRect().top + "px";
  label4.style.top=document.getElementById('table5').getBoundingClientRect().top-label4.getBoundingClientRect().top + "px";
  label5.style.top=document.getElementById('table6').getBoundingClientRect().top-label5.getBoundingClientRect().top + "px";
  label6.style.top=document.getElementById('table7').getBoundingClientRect().top-label6.getBoundingClientRect().top + "px";
  label7.style.top=document.getElementById('table8').getBoundingClientRect().top-label7.getBoundingClientRect().top + "px";

  let breadcrumbs = document.getElementById('breadcrumbs');
  let breadcrumbsLast = document.getElementById('breadcrumbsLast');

  breadcrumbs.innerHTML='Редактирование зоны ' + localStorage.getItem('zoneName');
  breadcrumbsLast.innerHTML=localStorage.getItem('recordName');

  let zoneNameHeader =  document.getElementById('zoneNameHeader');
  zoneNameHeader.innerHTML+= localStorage.getItem('recordName');

  let zoneName =  document.getElementById('zoneName');
  zoneName.innerHTML= localStorage.getItem('recordName');
 

{% endblock %}

{% block mainHeader %}
  <div class="d-flex flex-md-column bd-highlight mb-3" style="margin-bottom: 0px !important">
  <p style="margin-left:10px"><a href="/dns_management/">Управление DNS</a> >> <a href="/edit_zone/" id="breadcrumbs"></a> >> <a href="/edit_zone_record/" id="breadcrumbsLast"></a></p>
  <div class="p-2 bd-highlight" style="position: relative; margin-top: -20px"><h3 id="zoneNameHeader">Запись DNS-ресурса: </h3></div>
  <div class="p-2 bd-highlight" style="position: relative; margin-top: -10px"><ul class="nav nav-pills p-2">
    <li class="nav-item" style="margin-right:5px"><a type="button" class="btn btn-block bg-gradient-primary" href="#"><i class="nav-icon fas fa-sync" style="margin-right:5px"></i>Обновить</a></li>
    <li class="nav-item" style="margin-right:5px"><a type="button" class="btn btn-block bg-gradient-primary" href="#"><i class="nav-icon fas fa-undo" style="margin-right:5px"></i>Вернуть</a></li>
    <li class="nav-item" style="margin-right:5px"><a type="button" class="btn btn-block bg-gradient-primary" href="#"><i class="nav-icon fas fa-download" style="margin-right:5px"></i>Сохранить</a></li>
    </ul></div></div>
    
{% endblock %}

{% block wrapper %}

<div class="content-wrapper">

  <!-- Main content -->
  <section class="content">

    <!-- Default box -->
      <div class="card">
        <div class="card-header">
          
        </div>
        <div class="card-body">
          <div class="row">

            <div class="col-12 col-md-12 col-lg-3 order-2 order-md-1" id="part1" style="margin-top: 5%">
              <h4>Настройки идентификации</h4>
              <br><p class="float-right"><big>Имя записи</big></p><br>
              <h4>Настройки записи</h4>
              <br><p class="float-right"><big>Время существования (в секундах)</big></p><br>
              <br><h4>Стандартные типы записей</h4>      
              <br><p class="float-right"><big>A</big></p><br>
              <br><p class="float-right" style="visibility: hidden; position: relative" id="label1" name="labels"><big>AAAA</big></p><br>
              <br><p class="float-right" style="visibility: hidden; position: relative" id="label2" name="labels"><big>PTR</big></p><br>
              <br><p class="float-right" style="visibility: hidden; position: relative" id="label3" name="labels"><big>CNAME</big></p><br>
              <br><p class="float-right" style="visibility: hidden; position: relative" id="label4" name="labels"><big>NS</big></p><br>
              <br><p class="float-right" style="visibility: hidden; position: relative" id="label5" name="labels"><big>MX</big></p><br>
              <br><p class="float-right" style="visibility: hidden; position: relative" id="label6" name="labels"><big>SRV</big></p><br>
              <br><p class="float-right" style="visibility: hidden; position: relative" id="label7" name="labels"><big>TXT</big></p><br>
            </div>

            <div class="col-12 col-md-12 col-lg-9 order-1 order-md-2" style="margin-top: 5%">
              <div class="row">
                <div class="col-12 col-sm-1">  
                </div>

                <div class="col-12 col-sm-11">         

                <h4 style="visibility: hidden">Настройки</h4>
                <br><p style="font-size: 110%; margin-top: 4px"><a href="#" id="zoneName">.</a></p>
                <h4 style="visibility: hidden">Настройки</h4>
                <div class="form-group">        
                  <input class="form-control" id="nameInput" type="text" style="font-size: 130%">
                </div>
                <h4 style="visibility: hidden">Настройки</h4>

                <table class="table table-bordered table-hover" id="table1">
              <thead>
              <tr>
                <th width="3%"><div class="custom-control custom-checkbox" style="transform: translateX(15%)">
                          <input class="custom-control-input" id="table1chbox1" type="checkbox">
                          <label for="table1chbox1" class="custom-control-label"></label>
                        </div></th>
                <th>IP-адрес</th>
                <th></th>
              </tr>
              </thead>
              <tbody>
                <tr>
                  <td><div class="custom-control custom-checkbox" style="transform: translateX(15%)">
                          <input class="custom-control-input" id="table1chbox2" type="checkbox">
                          <label for="table1chbox2" class="custom-control-label"></label>
                        </div></td>
                  <td><a href="#">255.255.255.255</a></td>
                  <td></td>
                </tr> 
<tr>
                  <td><div class="custom-control custom-checkbox" style="transform: translateX(15%)">
                          <input class="custom-control-input" id="table1chbox2" type="checkbox">
                          <label for="table1chbox2" class="custom-control-label"></label>
                        </div></td>
                  <td><a href="#">255.255.255.255</a></td>
                  <td></td>
                </tr> 
<tr>
                  <td><div class="custom-control custom-checkbox" style="transform: translateX(15%)">
                          <input class="custom-control-input" id="table1chbox2" type="checkbox">
                          <label for="table1chbox2" class="custom-control-label"></label>
                        </div></td>
                  <td><a href="#">255.255.255.255</a></td>
                  <td></td>
                </tr> 
              </tbody>
            </table><br>

            <table class="table table-bordered table-hover" id="table2" style="position: relative">
              <thead>
              <tr>
                <th width="3%"><div class="custom-control custom-checkbox" style="transform: translateX(15%)">
                          <input class="custom-control-input" id="table2chbox1" type="checkbox">
                          <label for="table2chbox1" class="custom-control-label"></label>
                        </div></th>
                <th>IP-адрес</th>
                <th></th>
              </tr>
              </thead>
              <tbody>
              </tbody>
            </table><br>

            <table class="table table-bordered table-hover" id="table3" style="position: relative">
              <thead>
              <tr>
                <th width="3%"><div class="custom-control custom-checkbox" style="transform: translateX(15%)">
                          <input class="custom-control-input" id="table3chbox1" type="checkbox">
                          <label for="table3chbox1" class="custom-control-label"></label>
                        </div></th>
                <th>Имя хоста</th>
                <th></th>
              </tr>
              </thead>
              <tbody>
              </tbody>
            </table><br>

            <table class="table table-bordered table-hover" id="table4" style="position: relative">
              <thead>
              <tr>
                <th width="3%"><div class="custom-control custom-checkbox" style="transform: translateX(15%)">
                          <input class="custom-control-input" id="table4chbox1" type="checkbox">
                          <label for="table4chbox1" class="custom-control-label"></label>
                        </div></th>
                <th>Имя хоста</th>
                <th></th>
              </tr>
              </thead>
              <tbody>
              </tbody>
            </table><br>

            <table class="table table-bordered table-hover" id="table5" style="position: relative">
              <thead>
              <tr>
                <th width="3%"><div class="custom-control custom-checkbox" style="transform: translateX(15%)">
                          <input class="custom-control-input" id="table5chbox1" type="checkbox">
                          <label for="table5chbox1" class="custom-control-label"></label>
                        </div></th>
                <th>Имя хоста</th>
                <th></th>
              </tr>
              </thead>
              <tbody>
              </tbody>
            </table><br>

            <table class="table table-bordered table-hover" id="table6" style="position: relative">
              <thead>
              <tr>
                <th width="3%"><div class="custom-control custom-checkbox" style="transform: translateX(15%)">
                          <input class="custom-control-input" id="table6chbox1" type="checkbox">
                          <label for="table6chbox1" class="custom-control-label"></label>
                        </div></th>
                <th>Преференция</th>
                <th>Обменник</th>
                <th></th>
              </tr>
              </thead>
              <tbody>
              </tbody>
            </table><br>

            <table class="table table-bordered table-hover" id="table7" style="position: relative">
              <thead>
              <tr>
                <th width="3%"><div class="custom-control custom-checkbox" style="transform: translateX(15%)">
                          <input class="custom-control-input" id="table7chbox1" type="checkbox">
                          <label for="table7chbox1" class="custom-control-label"></label>
                        </div></th>
                <th>Приоритет (порядок)</th>
                <th>Вес</th>
                <th>Порт</th>
                <th>Таргет</th>
                <th></th>
              </tr>
              </thead>
              <tbody>
              </tbody>
            </table><br>

            <table class="table table-bordered table-hover" id="table8" style="position: relative">
              <thead>
              <tr>
                <th width="3%"><div class="custom-control custom-checkbox" style="transform: translateX(15%)">
                          <input class="custom-control-input" id="table8chbox1" type="checkbox">
                          <label for="table8chbox1" class="custom-control-label"></label>
                        </div></th>
                <th>Текстовые данные</th>
                <th></th>
              </tr>
              </thead>
              <tbody>
              </tbody>
            </table><br>

            </div>
          </div>
        </div>
        <!-- /.card-body -->
      </div>
      <!-- /.card -->
  </section>
  <!-- /.content -->

<script>

</script>

{% endblock %}