{% load util %}
{% load i18n %}
<div class="section_title">{% trans "Manage" %}</div>
<div class="marg-top">
  <ul class="nav nav-tabs" role="tablist">
    {% if permissions.can_create_fac %}
    <li role="presentation">
      <a href="#add_fac"  class="{{ tab_init.fac }}" aria-controls="add_fac" role="tab" data-bs-toggle="tab">
        {% trans "Add Facility" %}
      </a>
    </li>
    {% endif %}
    {% if permissions.can_create_net %}
    <li role="presentation">
      <a href="#add_net"  class="{{ tab_init.net }}" aria-controls="add_net" role="tab" data-bs-toggle="tab">
        {% trans "Add Network" %}
      </a>
    </li>
    {% endif %}
    {% if permissions.can_create_ix %}
    <li role="presentation">
      <a href="#add_ix"  class="{{ tab_init.ix}}" aria-controls="add_ix" role="tab" data-bs-toggle="tab">
        {% trans "Add Exchange" %}
      </a>
    </li>
    {% endif %}

    {% if permissions.can_create_carrier %}
    <li role="presentation">
      <a href="#add_carrier"  class="{{ tab_init.carrier}}" aria-controls="add_carrier" role="tab" data-bs-toggle="tab">
        {% trans "Add Carrier" %}
      </a>
    </li>
    {% endif %}

    {% if permissions.can_create_campus %}
      <li role="presentation">
        <a href="#add_campus" class="{{ tab_init.campus}}" aria-controls="add_campus" role="tab" data-bs-toggle="tab">
          {% trans "Add Campus" %}
        </a>
      </li>
    {% endif %}

    {% if permissions.can_manage %}
    <li role="presentation" class="{{ tab_init.users }}">
      <a href="#users" aria-controls="users" role="tab" data-bs-toggle="tab">
        {% trans "Users" %}
      </a>
    </li>
    <li role="presentation">
      <a href="#manage_perms" aria-controls="manage_perms" role="tab" data-bs-toggle="tab">
        {% trans "Permissions" %}
      </a>
    </li>
    <li role="presentation">
      <a href="#manage_keys" aria-controls="manage_keys" role="tab" data-bs-toggle="tab">
        {% trans "API Keys" %}
      </a>
    </li>
    <li role="presentation">
      <a href="#manage_key_perms" aria-controls="manage_key_perms" role="tab" data-bs-toggle="tab">
        {% trans "API Key Permissions" %}
      </a>
    </li>
    <li role="presentation">
      <a href="#manage_oauth" aria-controls="manage_oauth" role="tab" data-bs-toggle="tab">
        {% trans "OAuth" %}
      </a>
    </li>
    <li role="presentation" class="danger">
      <a href="#manage_delete" aria-controls="manage_delete" role="tab" data-bs-toggle="tab">
        {% trans "Delete Organization" %}
      </a>
    </li>

    {% endif %}
  </ul>

  <div class="tab-content">
    {% if permissions.can_create_fac %}
    <div role="tabpanel" class="tab-pane {{ tab_init.fac }}" id="add_fac">

      <!-- CREATE FACILITY FORM -->

      <div class="editable always auto-toggled create-form"
           id="create-fac-form"
           data-edit-target="api:fac:create"
           data-edit-enter-action="submit">
        <div class="editable popin alert alert-warning geovalidation-warning center marg-top-15 marg-bot-15 hidden"
             data-edit-geotag="fac">
        </div>

      <div data-edit-geotag="fac"
        class="editable popin alert alert-warning suggested-address marg-top-15 marg-bot-15 hidden">
        <div class="row">
          <div class="col-xs-8">
            <p>{% trans "Suggested Address:" %}</p>
            <div data-edit-field="address1" class="address-field"></div>
            <span data-edit-field="city" class="address-field"></span>
            <span data-edit-field="state" class="address-field"></span>
            <span data-edit-field="zipcode" class="address-field"></span>
          </div>
          <div class="col-xs-4 text-right">
            <a class="btn btn-default suggestion-accept">{% trans "Accept" %}</a>
          </div>
        </div>
      </div>


        <div class="payload">
          <div data-edit-name="org_id">{{ instance.id }}</div>
        </div>

        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-6">
            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Name" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="string"
                     data-edit-required="yes"
                     data-edit-name="name"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Website" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="url"
                     data-edit-required="yes"
                     data-edit-name="website"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Address 1" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="string"
                     data-edit-required="yes"
                     data-edit-name="address1"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Address 2" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="string"
                     data-edit-name="address2"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "City" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="string"
                     data-edit-required="yes"
                     data-edit-name="city"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "State" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="string"
                     data-edit-name="state"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Zip-Code" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="string"
                     data-edit-required="no"
                     data-edit-name="zipcode"></div>
              </div>
            </div>



            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Country" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="select"
                     data-edit-name="country"
                     data-edit-required="yes"
                     data-edit-data="countries"
                     data-edit-value="US"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "CLLI Code" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="string"
                     data-edit-name="clli"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "NPA-NXX" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="string"
                     data-edit-name="npanxx"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Technical E-mail" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="email"
                     data-edit-name="tech_email"></div>
              </div>
            </div>
            <div class="row">
              <div
                class="col-xs-4 col-sm-5 col-md-4 help-text"
                data-bs-toggle="tooltip"
                data-placement="top"
                title="{{ data.phone_help_text }}">
              {% trans "Technical Phone" %}
              <span class="glyphicon glyphicon-question-sign"></span>
            </div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="string"
                     data-edit-name="tech_phone"></div>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Sales E-mail" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="email"
                     data-edit-name="sales_email"></div>
              </div>
            </div>
            <div class="row">
              <div
                class="col-xs-4 col-sm-5 col-md-4 help-text"
                data-bs-toggle="tooltip"
                data-placement="top"
                title="{{ data.phone_help_text }}">
              {% trans "Sales Phone" %}
              <span class="glyphicon glyphicon-question-sign"></span>
              </div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="string"
                     data-edit-name="sales_phone"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4"> {% trans "Health Check" %}
              </div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="url"
                     data-edit-name="status_dashboard"></div>
              </div>
            </div>


            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Property" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="select"
                     data-edit-name="property"
                     data-edit-data="enum/property"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Diverse Serving Substations" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="select"
                     data-edit-name="diverse_serving_substations"
                     data-edit-data="enum/bool_choice_with_opt_out_str"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Available Voltage Services" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="select"
                     data-edit-name="available_voltage_services"
                     data-edit-multiple="yes"
                     data-edit-data="enum/available_voltage"></div>
              </div>
            </div>



          </div>
          <div class="col-xs-12 col-sm-6 col-md-6">
            {% include "site/entity_create.html" with entity_name="Facility" %}
          </div>
        </div>
      </div>
    </div>
    {% endif %}
    {% if permissions.can_create_net %}
    <div role="tabpanel" class="tab-pane {{ tab_init.net }}" id="add_net">
      <!-- CREATE NETWORK FORM -->

      <div class="editable always auto-toggled create-form"
           id="create-net-form"
           data-edit-target="api:net:create"
           data-edit-enter-action="submit">

        <div class="payload">
          <div data-edit-name="org_id">{{ instance.id }}</div>
        </div>

        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-6">
            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Name" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="string"
                     data-edit-required="yes"
                     data-edit-name="name"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Website" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="url"
                     data-edit-name="website"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "ASN" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="string"
                     data-edit-required="yes"
                     data-edit-name="asn"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "IRR as-set/route-set" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="string"
                     data-edit-name="irr_as_set"></div>
              </div>
            </div>


            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Network Type" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="select"
                     data-edit-name="info_type"
                     data-edit-data="enum/net_types_trunc"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Traffic Levels" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="select"
                     data-edit-name="info_traffic"
                     data-edit-data="enum/traffic"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Traffic Ratios" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="select"
                     data-edit-name="info_ratio"
                     data-edit-data="enum/ratios_trunc"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Geographic Scope" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="select"
                     data-edit-name="info_scope"
                     data-edit-data="enum/scopes_trunc"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Unicast IPv4" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="bool"
                     data-edit-name="info_unicast"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Multicast" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="bool"
                     data-edit-name="info_multicast"></div>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "IPv6" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="bool"
                     data-edit-name="info_ipv6"></div>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Policy URL" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="url"
                     data-edit-name="policy_url"></div>
              </div>
            </div>


            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "General Policy" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="select"
                     data-edit-name="policy_general"
                     data-edit-required="yes"
                     data-edit-data="enum/policy_general"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Multiple Locations" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="select"
                     data-edit-name="policy_locations"
                     data-edit-required="yes"
                     data-edit-data="enum/policy_locations"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Ratio Requirement" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="bool"
                     data-edit-name="policy_ratio"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Contract Requirement" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="select"
                     data-edit-name="policy_contracts"
                     data-edit-required="yes"
                     data-edit-data="enum/policy_contracts"></div>
              </div>
            </div>


            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4"> {% trans "Health Check" %}
              </div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="url"
                     data-edit-name="status_dashboard"></div>
              </div>
            </div>

          </div>
          <div class="col-xs-12 col-sm-6 col-md-6">

            <div class="editable note info">
              <p><strong>{% trans "Only use this if you own the network" %}</strong></p>
              {% trans "Add a new Network to your Organization." %}
              <div class="marg-top-15">{% trans "We will attempt to automatically verify your relationship to the network by checking for your email address in the ASN's RiR entry." %}
              </div>
              <div class="marg-top-15">{% trans "In case of verification failure the network will need to be approved by PeeringDB staff before it will appear in the search results or the API listings." %}
              </div>
            </div>
            <div class="marg-top">
              <a class="btn btn-default" data-edit-action="submit">{% trans "Submit Network"  %}</a>
            </div>

            <div class="editable popin help marg-top-15">
              {% trans "In case the RiR entry cannot be retrieved for your ASN, please contact" %}
              <a href="mailto:support@peeringdb.com">support@peeringdb.com</a>
              {% trans "for assistance with the creation of your network in PeeringDB." %}
            </div>


          </div>
        </div>
      </div>

    </div>
    {% endif %}
    {% if permissions.can_create_ix %}
    <div role="tabpanel" class="tab-pane {{ tab_init.ix }}" id="add_ix">
      <!-- CREATE EXCHANGE FORM -->

      <div class="editable always auto-toggled create-form"
           id="create-ix-form"
           data-edit-target="api:ix:create"
           data-edit-enter-action="submit">
        <div class="payload">
          <div data-edit-name="org_id">{{ instance.id }}</div>
        </div>

        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-6">
            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Name" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="string"
                     data-edit-required="yes"
                     data-edit-name="name"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Website" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="url"
                     data-edit-name="website"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "City" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="string"
                     data-edit-required="yes"
                     data-edit-name="city"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Country" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="select"
                     data-edit-name="country"
                     data-edit-required="yes"
                     data-edit-data="countries"
                     data-edit-value="US"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Continental Region" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="select"
                     data-edit-name="region_continent"
                     data-edit-required="yes"
                     data-edit-data="enum/regions"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Media Type" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="select"
                     data-edit-name="media"
                     data-edit-required="yes"
                     data-edit-data="enum/media"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Unicast IPv4" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="mandatory_bool"
                     data-edit-name="proto_unicast"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Multicast" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="mandatory_bool"
                     data-edit-name="proto_multicast"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "IPv6" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="mandatory_bool"
                     data-edit-name="proto_ipv6"></div>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Traffic Stats Website" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="url"
                     data-edit-name="url_stats"></div>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Technical E-mail" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="email"
                     data-edit-required="yes"
                     data-edit-name="tech_email"></div>
              </div>
            </div>
            <div class="row">
              <div
                class="col-xs-4 col-sm-5 col-md-4 help-text"
                data-bs-toggle="tooltip"
                data-placement="top"
                title="{{ data.phone_help_text }}">
              {% trans "Technical Phone" %}
              <span class="glyphicon glyphicon-question-sign"></span>
            </div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="string"
                     data-edit-name="tech_phone">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Policy E-mail" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="email"
                     data-edit-name="policy_email"></div>
              </div>
            </div>
            <div class="row">
              <div
                class="col-xs-4 col-sm-5 col-md-4 help-text"
                data-bs-toggle="tooltip"
                data-placement="top"
                title="{{ data.phone_help_text }}">
                {% trans "Policy Phone" %}
              <span class="glyphicon glyphicon-question-sign"></span>
              </div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="string"
                     data-edit-name="policy_phone"></div>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Sales E-mail" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="email"
                     data-edit-name="sales_email"></div>
              </div>
            </div>
            <div class="row">
              <div
                class="col-xs-4 col-sm-5 col-md-4 help-text"
                data-bs-toggle="tooltip"
                data-placement="top"
                title="{{ data.phone_help_text }}">
              {% trans "Sales Phone" %}
              <span class="glyphicon glyphicon-question-sign"></span>
              </div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="string"
                     data-edit-name="sales_phone"></div>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Prefix" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="string"
                     data-edit-required="yes"
                     data-edit-placeholder="{% trans "IPv4 or IPv6 prefix" %}"
                     data-edit-name="prefix"></div>
              </div>
            </div>


            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4"> {% trans "Health Check" %}
              </div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="url"
                     data-edit-name="status_dashboard"></div>
              </div>
            </div>


          </div>
          <div class="col-xs-12 col-sm-6 col-md-6">
            {% include "site/entity_create.html" with entity_name="Exchange" %}
          </div>
        </div>
      </div>
    </div>
    {% endif %}

    {% if permissions.can_create_carrier %}
    <div role="tabpanel" class="tab-pane {{ tab_init.carrier }}" id="add_carrier">
      <!-- CREATE EXCHANGE FORM -->

      <div class="editable always auto-toggled create-form"
           id="create-carrier-form"
           data-edit-target="api:carrier:create"
           data-edit-enter-action="submit">
        <div class="payload">
          <div data-edit-name="org_id">{{ instance.id }}</div>
        </div>

        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-6">
            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Name" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="string"
                     data-edit-required="yes"
                     data-edit-name="name"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Website" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="url"
                     data-edit-name="website"></div>
              </div>
            </div>

          </div>
          <div class="col-xs-12 col-sm-6 col-md-6">
            {% include "site/entity_create.html" with entity_name="Carrier" %}
          </div>
        </div>
      </div>
    </div>
    <!-- END CAN_CREATE -->
    {% endif %}

    {% if permissions.can_create_campus %}
    <div role="tabpanel" class="tab-pane {{ tab_init.campus }}" id="add_campus">
      <!-- CREATE CAMPUS FORM -->

      <div class="editable always auto-toggled create-form"
           id="create-campus-form"
           data-edit-target="api:campus:create"
           data-edit-enter-action="submit">
        <div class="payload">
          <div data-edit-name="org_id">{{ instance.id }}</div>
        </div>

        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-6">
            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Name" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="string"
                     data-edit-required="yes"
                     data-edit-name="name"></div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4 col-sm-5 col-md-4">{% trans "Website" %}</div>
              <div class="col-xs-8 col-sm-7 col-md-8">
                <div data-edit-type="url"
                     data-edit-name="website"></div>
              </div>
            </div>

          </div>
          <div class="col-xs-12 col-sm-6 col-md-6">
            {% include "site/entity_create.html" with entity_name="Campus" %}
          </div>
        </div>
      </div>
    </div>
    <!-- END CAN_CREATE -->
    {% endif %}


    {% if permissions.can_manage %}
    <div role="tabpanel" class="tab-pane {{ tab_init.users }}" id="users">
      <div class="editable">
      <h5>{% trans "Users requesting affiliation" %}</h5>
      <div class="list editable always"
           data-edit-module="uoar_listing"
           data-edit-target="/org_admin/uoar">
        <div class="payload">
          <div data-edit-name="org_id">{{ instance.id }}</div>
        </div>

        <div class="row header">
          <div class="col-xs-6 col-sm-3 col-md-3">
            <div>{% trans "Name" %}</div>
            <div>{% trans "User" %}</div>
          </div>
          <div class="col-xs-6 col-sm-3 col-md-3">
            <div>{% trans "Email" %}</div>
            <div>{% trans "Confirmed" %}</div>
          </div>
          <div class="col-xs-6 col-sm-3 col-md-3">{% trans "Date" %}</div>
          <div class="col-xs-12 col-sm-3 col-md-3"></div>
        </div>

      {% if instance.pending_affiliations.count %}
        {% for uoar in instance.pending_affiliations %}
        {% with user_email=instance|org_email:user %}
        <div class="row item" data-edit-id="{{ uoar.id }}" data-edit-label="{{ uoar.user.full_name }}">

          <div class="col-xs-6 col-sm-3 col-md-3">
            <div>{{ uoar.user.full_name }}</div>
            <div>{{ uoar.user.username }}</div>
          </div>
          <div class="col-xs-6 col-sm-3 col-md-3">
            <div>{{ uoar.user.email }}</div>
            <div>{% if uoar.user.email|email_confirmed %}{% trans "Yes" %}{% else %}{% trans "No" %}{% endif %}</div>
          </div>
          <div class="col-xs-6 col-sm-3 col-md-3">{{ uoar.created|date:"Y, N d" }}</div>
          <div class="col-xs-6 col-sm-3 col-md-3 right">
            <a class="btn btn-default" data-edit-action="approve">{% trans "Approve" %}</a>
            <a class="btn btn-default" data-edit-action="deny">{% trans "Deny" %}</a>
          </div>
        </div>
        {% endwith %}
        {% endfor %}
      {% else %}

      <div class="center">{% trans "Currently no users requesting affiliation with" %} {{ instance.name }}</div>


      {% endif %}
      </div>


<div class="row">
  <div class="col-xs-12 col-md-9">

      <h5>{% trans "Users in Organization" %}</h5>

      <div class="editable always auto-toggled" data-edit-target="/org_admin/manage_user">
      <div class="list editable always" id="org-user-manager"
           data-edit-module="user_listing"
           data-edit-id="{{ instance.id }}"
           data-edit-target="/org_admin/manage_user">

        <div class="row header">
          <div class="col-xs-4 col-sm-5 col-md-4">
            <div>{% trans "Name" %}</div>
            <div>{% trans "User" %}</div>
          </div>
          <div class="col-xs-4 col-sm-5 col-md-4">
            <div>{% trans "Email" %}</div>
          </div>
          <div class="col-xs-4 col-sm-5 col-md-2">{% trans "Group" %}</div>
          <div class="col-xs-4 col-sm-2 col-md-2"></div>
        </div>

        <div data-edit-component="list"
             data-edit-template="user-item">
        {% for user in users %}
        {% with user_email=instance|org_email:user %}
        <div class="row item editable" data-edit-id="{{ user.id }}" data-edit-label="{{ user.full_name }}">
          <div class="col-xs-4 col-sm-5 col-md-4">
            <div>{{ user.full_name }}</div>
            <div>{{ user.username }} {% if user.totpdevice_set.exists %}<span class="badge-2fa">2FA</span>{% endif %}</div>
          </div>
          <div class="col-xs-4 col-sm-5 col-md-4">
            <div class="{% if not user_email %} highlight-warning{% endif %}">{% if user_email %}{{ user_email }}{% else %}{% trans "Email address requirements not met" %}{% endif %}</div>
          </div>
          <div class="col-xs-4 col-sm-5 col-md-2">
            <div data-edit-type="select"
                 data-edit-data="enum/org_groups"
                 data-edit-name="group"
                 data-edit-value="{{ instance|user_org_group:user }}">{{ instance|user_org_group:user }}</div>
          </div>
          <div class="col-xs-4 col-sm-2 col-md-2 right">
            <a class="btn btn-default" data-edit-action="remove">{% trans "Remove" %}</a>
          </div>
        </div>
        {% endwith %}
        {% endfor %}
        </div>

      <div class="marg-top right"><a class="btn btn-default" data-edit-action="submit">{% trans "Save" %}</a></div>

      </div>
      </div>

  </div>

  <div class="col-xs-12 col-md-3">
    <h5>{% trans "Options" %}</h5>

    <div class="editable always auto-toggled" data-edit-redirect-on-success="?tab=users" data-edit-target="{% url "org-admin-user-options" %}">

      <div class="editable payload">
        <div data-edit-name="org_id">{{ instance.id }}</div>
      </div>

      <div class="mb-3 checkbox-inline">
        <div data-edit-type="bool" data-edit-name="restrict_user_emails" data-edit-value="{{ instance.restrict_user_emails }}"></div>
        {% trans "Restrict user email addresses to these domains" %}
      </div>
      <div class="mb-3">
        <div data-edit-type="text" data-edit-name="email_domains" data-edit-value="{{ instance.email_domains }}"></div>
      </div>
      <div class="mb-3 checkbox-inline">
        <div data-edit-type="bool" data-edit-name="periodic_reauth" data-edit-value="{{ instance.periodic_reauth }}"></div>
        {% trans "Require users to periodically re-confirm their email address: " %}
      </div>
      <div class="mb-3">
        <div data-edit-type="select"
             data-edit-data="enum/reauth_periods"
             data-edit-name="periodic_reauth_period"
             data-edit-value="{{ instance.periodic_reauth_period }}">{{ instance.periodic_reauth_period }}</div>
      </div>
      <div class="right marg-top">
        <a class="btn btn-default" data-edit-action="submit">{% trans "Update Options" %}</a>
      </div>
    </div>

  </div>

</div>


    </div>
    </div>

    <div role="tabpanel" class="tab-pane" id="manage_perms">

      <div class="editable note info">
        {%blocktrans trimmed %}
        Here you can grant permissions to regular members of your organization.
        Administrative users are not listed here as they have access to everything by default.
        {%endblocktrans%}
        <div class="marg-top">
          {% trans "Additionally, entities that are pending review cannot be permissioned out to users, and will not appear in the entity list." %}
        </div>
      </div>


      <div class="editable always auto-toggled marg-top" id="manage_perms_editor" data-edit-target="org_admin/permissions">

        {% for uperms in user_perms.values %}
        <div class="list editable always marg-top"
             data-edit-id="{{ instance.id }}"
             data-edit-module="uperm_listing"
             data-edit-template="user-permission-item"
             data-edit-target="/org_admin/user_permissions">

          <div class="row header">
            <div class="col-xs-12 col-sm-5 col-md-5">
              <div>{{ uperms.name }}</div>
            </div>
            <div class="col-xs-4 col-sm-2 col-md-2">
              <div>{% trans "Create" %}</div>
            </div>
            <div class="col-xs-4 col-sm-2 col-md-2">
              <div>{% trans "Update" %}</div>
            </div>
            <div class="col-xs-4 col-sm-2 col-md-2">
              <div>{% trans "Delete" %}</div>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1">
            </div>
          </div>

          <div data-edit-component="list"
               data-edit-template="user-permission-item">

              {% for entity, perm in uperms.perms.items %}

              <div class="row marg-top" data-edit-id="{{ entity }}" data-edit-label="{{ uperms.name }} - {{ instance|org_permission_id_xl:entity}}">
                <div class="editable payload">
                  <div data-edit-name="user_id">{{ uperms.id }}</div>
                  <div data-edit-name="org_id">{{ instance.id }}</div>
                  <div data-edit-name="entity">{{ entity }}</div>
                </div>
                <div class="col-xs-12 col-sm-5 col-md-5">
                  <a class="btn-row-delete" data-edit-toggled="edit" data-edit-action="remove">&times;</a>
                  <div data-edit-name="entity">{{ instance|org_permission_id_xl:entity }}</div>
                </div>
                <div class="col-xs-4 col-sm-2 col-md-2">
                  <div data-edit-name="perm_c" data-edit-type="bool" data-edit-value="{{ perm|check_perms:'c' }}"></div>
                </div>
                <div class="col-xs-4 col-sm-2 col-md-2">
                  <div data-edit-name="perm_u" data-edit-type="bool" data-edit-value="{{ perm|check_perms:'u' }}"></div>
                </div>
                <div class="col-xs-4 col-sm-2 col-md-2">
                  <div data-edit-name="perm_d" data-edit-type="bool" data-edit-value="{{ perm|check_perms:'d' }}"></div>
                </div>
                <div class="col-xs-12 col-sm-1 col-md-1 right">
                </div>
              </div>

              {% endfor %}

          </div>

          <div data-edit-component="add"
               data-edit-toggled="edit"
               class="editable">

            <div class="payload">
              <div data-edit-name="org_id">{{ instance.id }}</div>
              <div data-edit-name="user_id">{{ uperms.id }}</div>
            </div>

            <div class="row marg-top">
              <div class="col-xs-12 col-sm-5 col-md-5">
                <div data-edit-name="entity"
                     data-edit-type="select"
                     data-edit-data="permissions"></div>
              </div>
              <div class="col-xs-4 col-sm-2 col-md-2">
                <div data-edit-name="perm_c" data-edit-type="bool"></div>
              </div>
              <div class="col-xs-4 col-sm-2 col-md-2">
                <div data-edit-name="perm_u" data-edit-type="bool"></div>
              </div>
              <div class="col-xs-4 col-sm-2 col-md-2">
                <div data-edit-name="perm_d" data-edit-type="bool"></div>
              </div>
              <div class="col-xs-12 col-sm-1 col-md-1 right">
                <a class="btn btn-default" data-edit-action="add">{% trans "Add" %}</a>
              </div>
            </div>



          </div>
        </div>

        {% endfor %}

          <div class="row marg-top">
            <div class="col-md-12 center">
              <a class="btn btn-default" data-edit-action="submit">{% trans "Save" %}</a>
            </div>
          </div>


      </div>

    </div>

    <div role="tabpanel" class="tab-pane" id="manage_keys">
      {% include "site/org_manage_keys.html" %}
    </div>

    <div role="tabpanel" class="tab-pane" id="manage_key_perms">
      {% include "site/org_manage_key_permissions.html" %}
    </div>

    <div role="tabpanel" class="tab-pane" id="manage_oauth">
      {% include "site/org_manage_oauth.html" %}
    </div>

    <div role="tabpanel" class="tab-pane" id="manage_delete">
      <div class="alert alert-danger">
      {% if not instance.deletable %}
      <p>
      {% blocktrans trimmed with name=instance.name %}
      {{ name }} cannot be deleted.
      {% endblocktrans %}
      </p>
      <p>
      {{ instance.not_deletable_reason }}
      </p>
      {% else %}
      <p>
      {% blocktrans trimmed %}
      Remove this organization from PeeringDB.
      {% endblocktrans %}
      </p>
      <p>
        <div class="editable always auto-toggled create-form"
          data-edit-debug="yes"
          data-edit-always-submit="yes"
          data-edit-target="api:org:delete"
          id="frm-delete-org"
          data-edit-id="{{ instance.id }}">
          <a class="btn btn-danger" data-confirm="{% trans "Delete organization?" %}" data-edit-action="submit">{% blocktrans trimmed with name=instance.name %}Delete {{ name }}{% endblocktrans %}</a>
        </div>
      </p>
      {% endif %}
      </div>
    </div>
    <!-- END CAN MANAGE -->
    {% endif %}
  </div>

</div>

<script language="javascript" type="text/javascript">
twentyc.data.loaders.get("org_admin").prototype.orgId = {{ instance.id }};
twentyc.data.loaders.assign("users", "org_admin");
twentyc.data.loaders.assign("permissions", "org_admin");
twentyc.data.loaders.assign("key_permissions", "org_admin");
twentyc.data.load("permissions");
twentyc.data.load("key_permissions");
$(document).ready(function() {
  PeeringDB.list_ext_add($('#create-fac-form'),$('#api-listing-fac'));
  PeeringDB.list_ext_add($('#create-ix-form'),$('#api-listing-ix'));
  PeeringDB.list_ext_add($('#create-net-form'),$('#api-listing-net'));
  PeeringDB.list_ext_add($('#create-carrier-form'),$('#api-listing-carrier'));
  PeeringDB.list_ext_add($('#create-campus-form'),$('#api-listing-campus'));
  if(window.location.hash == "#users") {
    $('a[href="#users"]').tab('show');
  }

  $('#frm-delete-org').on("action-success", (e) => {
    alert(gettext("Organization deleted."));
    window.document.location.href= "/";
  });
});

</script>
