{% extends 'peering/autonomoussystem/_base.html' %}
{% load render_table from django_tables2 %}
{% block subcontent %}
<div class="row">
  <div class="col-md-6">
    <div class="card mb-3">
      <div class="card-header"><strong>Info</strong></div>
      <table class="card-body table table-hover attr-table mb-0">
        {% if instance.peeringdb_network.name %}
        <tr>
          <td>Name</td>
          <td>{{ instance.peeringdb_network.name }}</td>
        </tr>
        {% endif %}
        {% if instance.peeringdb_network.name_long %}
        <tr>
          <td>Long Name</td>
          <td>{{ instance.peeringdb_network.name_long }}</td>
        </tr>
        {% endif %}
        {% if instance.peeringdb_network.aka %}
        <tr>
          <td>Also Known As</td>
          <td>{{ instance.peeringdb_network.aka }}</td>
        </tr>
        {% endif %}
        {% if instance.peeringdb_network.website %}
        <tr>
          <td>Website</td>
          <td>{{ instance.peeringdb_network.website|urlize }}</td>
        </tr>
        {% endif %}
        {% if instance.peeringdb_network.looking_glass %}
        <tr>
          <td>Looking Glass</td>
          <td>{{ instance.peeringdb_network.looking_glass|urlize }}</td>
        </tr>
        {% endif %}
        {% if instance.peeringdb_network.route_server %}
        <tr>
          <td>Route Server</td>
          <td>{{ instance.peeringdb_network.route_server|urlize }}</td>
        </tr>
        {% endif %}
        <tr>
          <td colspan="2" class="text-center">
            <a class="btn btn-outline-primary" href="{{ settings.PEERINGDB_ASN }}{{ instance.asn }}" target="_blank">
              <i class="fa-fw fa-solid fa-external-link-alt"></i> See on PeeringDB
            </a>
          </td>
        </tr>
      </table>
    </div>
    {% with differences=instance.divergence_from_peeringdb %}
    {% if instance.affiliated and differences %}
    <div class="card mb-3">
      <div class="card-header">
        <strong>Differences</strong>
        <form class="float-end" id="proposal-form" action="{{ settings.PEERINGDB }}verified-update/" method="get" target="_blank">
          <input type="hidden" id="encoded-data" name="p">
          <button type="submit" class="btn btn-xs btn-primary" id="update-peeringdb" data-bs-toggle="tooltip" data-placement="bottom" title="Propose Peering Manager values to PeeringDB">
            <i class="fa-fw fa-solid fa-upload"></i> Push
          </button>
        </form>
      </div>
      <table class="card-body table table-hover attr-table mb-0">
        <tr>
          <th></th>
          <th>Peering Manager</th>
          <th>PeeringDB</th>
        <tr>
        {% for item in differences %}
        <tr>
          <td>{{ item.label }}</td>
          <td>{{ item.local_value }}</td>
          <td>{{ item.peeringdb_value }}</td>
        </tr>
        {% endfor %}
      </table>
      <div class="card-footer text-muted">
        If accepted on PeeringDB, locally cached values will updated on next synchronisation.
      </div>
    </div>
    {% endif %}
    {% endwith %}
    {% if contacts or facilities %}
    <div class="mb-2">
      {% if contacts %}
      <button type="button" class="btn btn-outline-secondary w-100 mb-2" data-bs-toggle="modal" data-bs-target="#contacts-modal">
        <i class="fa-solid fa-address-book"></i> Show contacts
      </button>
      {% endif %}
      {% if facilities %}
      <button type="button" class="btn btn-outline-secondary w-100" data-bs-toggle="modal" data-bs-target="#facilities-modal">
        <i class="fa-solid fa-building"></i> Show facilities
      </button>
      {% endif %}
    </div>
    {% endif %}
  </div>
  <div class="col-md-6">
    <div class="card mb-3">
      <div class="card-header"><strong>Traffic</strong></div>
      <table class="card-body table table-hover attr-table mb-0">
        {% if instance.peeringdb_network.info_type %}
        <tr>
          <td>Network Type</td>
          <td>{{ instance.peeringdb_network.info_type }}</td>
        </tr>
        {% endif %}
        {% if instance.peeringdb_network.info_traffic %}
        <tr>
          <td>Levels</td>
          <td>{{ instance.peeringdb_network.info_traffic }}</td>
        </tr>
        {% endif %}
        {% if instance.peeringdb_network.info_ratio %}
        <tr>
          <td>Ratios</td>
          <td>{{ instance.peeringdb_network.info_ratio }}</td>
        </tr>
        {% endif %}
        {% if instance.peeringdb_network.info_scope %}
        <tr>
          <td>Scope</td>
          <td>{{ instance.peeringdb_network.info_scope }}</td>
        </tr>
        {% endif %}
      </table>
    </div>
    <div class="card mb-3">
      <div class="card-header"><strong>Policy</strong></div>
      <table class="card-body table table-hover attr-table mb-0">
        {% if instance.peeringdb_network.policy_url %}
        <tr>
          <td>URL</td>
          <td>{{ instance.peeringdb_network.policy_url|urlize }}</td>
        </tr>
        {% endif %}
        {% if instance.peeringdb_network.policy_general %}
        <tr>
          <td>General</td>
          <td>{{ instance.peeringdb_network.policy_general }}</td>
        </tr>
        {% endif %}
        {% if instance.peeringdb_network.policy_locations %}
        <tr>
          <td>Multiple Locations</td>
          <td>{{ instance.peeringdb_network.policy_locations }}</td>
        </tr>
        {% endif %}
        {% if instance.peeringdb_network.policy_ratio %}
        <tr>
          <td>Ratio Requirement</td>
          <td>{{ instance.peeringdb_network.policy_ratio }}</td>
        </tr>
        {% endif %}
        {% if instance.peeringdb_network.policy_contracts %}
        <tr>
          <td>Contract Requirement</td>
          <td>{{ instance.peeringdb_network.policy_contracts }}</td>
        </tr>
        {% endif %}
      </table>
    </div>
  </div>
</div>
{% if contacts %}
<div class="modal fade" id="contacts-modal" tabindex="-1" aria-labelledby="contactsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="contactsModalLabel">Contacts</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <table class="modal-body table table-hover attr-table mb-0">
        <tr>
          <th>Role</th>
          <th>Name</th>
          <th>Phone</th>
          <th>E-mail</th>
        </tr>
        {% for contact in contacts %}
        <tr>
          <td>{{ contact.role }}</td>
          <td>{{ contact.name }}</td>
          <td>{{ contact.phone }}</td>
          <td>{{ contact.email }}</td>
        </tr>
        {% endfor %}
      </table>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
{% endif %}
{% if facilities %}
<div class="modal fade" id="facilities-modal" tabindex="-1" aria-labelledby="facilitiesModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="facilitiesModalLabel">Facilities</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <table class="modal-body table table-hover attr-table mb-0">
        <tr>
          <th>Name</th>
          <th>Also Known As</th>
          <th>Region</th>
        </tr>
        {% for facility in facilities %}
        <tr>
          <td>{{ facility.name }}</td>
          <td>{{ facility.aka }}</td>
          <td>{{ facility.region_continent }}</td>
        </tr>
        {% endfor %}
      </table>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endblock %}
{% block javascript %}
{% if instance.affiliated %}
{{ instance.divergence_from_peeringdb | json_script:'peeringdb-diff' }}
<script>
$('#proposal-form').on('submit', function() {
  const value = JSON.parse(document.getElementById('peeringdb-diff').textContent);
  var updates = {};
  for (const item of value) {
    updates[item.peeringdb_key] = item.local_value;
  }
  var jsonData = {
    'source': 'Peering Manager',
    'reason': 'Synchronisation with Peering Manager',
    'updates': [{'ref_tag': 'net', 'obj_id': {{ instance.peeringdb_network.id }}, 'data': updates}]
  };
  var encodedData = btoa(JSON.stringify(jsonData));
  $('#encoded-data').val(encodedData);
});
</script>
{% endif %}
{% endblock %}