{% extends 'components/base_nhncloud.html' %}
{% load static %}
{% block main_area %}
<section>
  <!-- start vpclist -->
  {% if vpcs %}
  <div class="col-lg-12">
    <h1>Result Message</h1>
    <h6 class="text-danger">Network를 삭제려면 Network에 속한 사용 중인 리소스를 먼저 제거해야 합니다.</h6>
    <hr>
  </div>
  {% for var in vpcs %}
  <div class="col-lg-12">
    <table class="table table-striped">
      <thead>
        <tr>
          <th scope="col">No</th>
          <th scope="col">Region</th>
          {% for key in var.keys %}
          <th scope="col">{{ key }}</th>
          {% endfor %}
          <th scope="col">
            delete
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{ forloop.counter }}</td>
          <!-- <td id="region-{{ forloop.counter }}">{{ region }}</td> -->
          <td id="region-{{ forloop.counter }}">{{ region }}</td>
          {% for key, value in var.items %}
          <td id="{{ key }}-{{ forloop.parentloop.counter }}">{{ value }}</td>
          {% endfor %}
          <td>
            <a type="submit" id="delete-{{ forloop.counter }}" class="btn btn-info float-right" href="#"
              data-bs-toggle="modal" data-bs-target="#deleteModal" onclick="vpcRemoveModal();">Delete</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  {% endfor %}
  {% else %}
  <div class="col-lg-12">
    <h1>Result Message</h1>
    <hr>
  </div>
  <div class="row">
    <div class="col-lg-8">
      <h3>리전에 생성된 VPC가 없습니다...</h3>
    </div>
    <div class="col-lg-2">
      <a class="btn btn-primary float-left" href="/nhncloud/createVpcRequest/">CreateNetwork</a>
    </div>
  </div>
  {% endif %}
</section>
<!-- Modal -->
<form method="post" action="{% url 'nhncloud:removeVpc' %}">{% csrf_token %}
  <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="deleteModalTitle">삭제를 위하여 계정 및 api 비밀번호를 입력해주세요.</h5>
          <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <div class="row">
              <div class="col-md-4 form-group">
                <label for="region">InterNetGateway</label>
              </div>
              <div class="col-md-8">
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="igwRadios" id="igwInclude" value="option1" checked>
                  <label class="form-check-label" for="igwRadios1">
                    Include
                  </label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="igwRadios" id="igwDetach" value="option2">
                  <label class="form-check-label" for="igwRadios2">
                    Detach
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div class="mb-3">
            <div class="row">
              <div class="col-md-4 form-group">
                <label for="region">Region</label>
              </div>
              <div class="col-md-8">
                <input type="text" class="form-control" name="region" id="region" value="{{ region }}" readonly>
              </div>
            </div>
          </div>
          <div class="mb-3">
            <div class="row">
              <div class="col-md-4">
                <label for="vpcName">Vpc Name</label>
              </div>
              <div class="col-md-8">
                <input type="text" class="form-control" name="vpcName" id="vpcName" readonly>
              </div>
            </div>
          </div>
          <div class="mb-3">
            <div class="row">
              <div class="col-md-4">
                <label for="tenantId">Tenant ID</label>
              </div>
              <div class="col-md-8">
                <input type="password" class="form-control" name="tenantId" id="tenantId" value="{{ user.nhnc_api_tenant_id }}" readonly>
              </div>
            </div>
          </div>
          <div class="mb-3">
            <div class="row">
              <div class="col-md-4">
                <label for="usrEmail">User Email</label>
              </div>
              <div class="col-md-8">
                <input type="text" class="form-control" name="usrEmail" id="usrEmail" value="{{ user.nhnc_id }}" readonly>
              </div>
            </div>
          </div>
          <div class="mb-3">
            <div class="row">
              <div class="col-md-4">
                <label for="apiPw">API Password</label>
              </div>
              <div class="col-md-8">
                <input type="password" class="form-control" name="apiPw" id="apiPw">
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-info float-right"
            onclick="alert('삭제 완료 후 VPC리스트가 조회됩니다...')">Request</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <script>
    function vpcRemoveModal() {

      id = event.srcElement.id
      console.log(id);
      var idx = id.indexOf('-') + 1
      tenantId = "tenant_id-" + id.substring(idx)
      vpcNameId = "name-" + id.substring(idx)
      regionId = "region-" + id.substring(idx)
      document.getElementById('vpcName').value = document.getElementById(vpcNameId).innerText
      document.getElementById('region').value = document.getElementById(regionId).innerText
      document.getElementById('tenantId').value = "{{ user.nhnc_api_tenant_id }}";
    }
  </script>
  {% endblock %}