{% load util i18n static %}
<!-- IX-F SUGGESTIONS -->

{% if permissions.can_write %}


{% if data.ixf or data.ixf_dismissed %}
<div data-edit-toggled="view" class="editable note info">
<p><strong>
{% trans "Some exchanges suggest updates to your entries in their peering list." %}
</strong></p>

  {% if data.ixf %}

<p>
<a data-edit-action="toggle-edit">{% trans "Review suggestions" %}</a>
</p>

  {% endif %}

  {% if data.ixf_dismissed %}

    <p><small>
      {% trans "You have dismissed some suggestions that are still available." %}
      <a id="btn-reset-proposals" class="interactive" data-reset-path="{% url "net-reset-ixf-proposals" net_id=instance.id %}" data-bs-toggle="tooltip" title="{% trans "Will restore any suggestions you have previously dismissed" %}">{% trans "Reset Suggestions" %}</a>
    </small></p>

  {% endif %}

</div>
{% endif %}


<div data-edit-toggled="edit">

{% if data.ixf %}
<div class="marg-side-15">
  <div class="row">
    <div class="col-12 editable note info">
    <p><strong>
    {% trans "Some exchanges suggest updates to your entries in their peering list." %}
    </strong></p>

      <p><small>
      {% trans "Expand each exchange below to review, apply or dismiss those suggestions" %}
      </small></p>
    </div>
  </div>
</div>
{% endif %}

{% for ixf_proposals in data.ixf %}
{% with ix_id=ixf_proposals.ix.id %}

<div class="ixf-proposals"
  data-ixf-proposals-ix="{{ ixf_proposals.ix.id }}"
  data-ixf-proposals-ix-name="{{ ixf_proposals.ix.name }}"
  data-ixf-proposals-net="{{ instance.id }}">
  <div class="marg-side-15 marg-top-15">
  <div class="row item" role="button" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#ixf-proposals-{{ ix_id }}">
    <div class="col-10">
      <h4 class="marg-top"><a class="ix-name">{{ ixf_proposals.ix.name }}</a></h4>
    </div>
    <div class="col-2 right">
      <svg class="collapsed" xmlns="http://www.w3.org/2000/svg" height="15px" viewBox="0 0 24 24" width="15px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>
      <svg class="expanded" xmlns="http://www.w3.org/2000/svg" height="15px" viewBox="0 0 24 24" width="15px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>
    </div>
  </div>
  </div>

  <div id="ixf-proposals-{{ ix_id }}" class="list padded-rows collapse">

  <div class="row controls">
    <div class="col-6">
      <a href="{% url "ix-view" id=ixf_proposals.ix.id %}">{% trans "Their PeeringDB entry" %}</a>
    </div>
    <div class="col-6 right">
      <button data-bs-toggle="tooltip" title="{% trans "Automatically update and remove all suggested entries" %}" class="btn btn-default btn-sm resolve-all" type="button">{% trans "Auto-resolve" %}</button>

      <button data-bs-toggle="tooltip" title="{% trans "Automatically add all suggested entries" %}" class="btn btn-default btn-sm add-all" type="button">{% trans "Auto-add" %}</button>
    </div>
  </div>

  {% if ixf_proposals.add %}

  <div class="row header header-add">
    <div class="col-5">
      <div>{% trans "Add" %}</div>
    </div>
    <div class="col-3">
      <div>{% trans "Speed" %}</div>
    </div>
    <div class="col-4">
      <div>{% trans "Options" %}</div>
    </div>
  </div>


  <div class="suggestions-add">

    <!-- SUGGESTIONS FOR NEW ENTRIES -->

    {% for x in ixf_proposals.add %}
    {% if not x.dismissed %}

    <div class="row item" data-ixf-id="{{ x.ixf_id_pretty_str }}">
      <div class="loading-shim" style="display:none;"></div>
      <div class="col-5">
        <div class="editable input-frame">
          {% if x.net.ipv4_support %}
          <input type="text" placeholder="{% trans "IPv4" %}" data-field="ipaddr4" value="{{ x.ipaddr4|none_blank }}">
          {% else %}
          <input type="text" placeholder="{% trans "IPv4" %}" data-field="ipaddr4" value="">
          {% endif %}
        </div>
        <div class="editable input-frame">
          {% if x.net.ipv6_support %}
          <input type="text" placeholder="{% trans "IPv6" %}" data-field="ipaddr6" value="{{ x.ipaddr6|none_blank }}">
          {% else %}
          <input type="text" placeholder="{% trans "IPv6" %}" data-field="ipaddr6" value="">
          {% endif %}
        </div>
      </div>
      <div class="col-3">
        <div>
          <div class="editable input-frame">
            <input type="text" placeholder="{% trans "Speed" %}" data-field="speed" value="{{ x.speed }}" id="{{ x.id }}-speed">
          </div>
        </div>
      </div>
      <div class="col-3">
        <div>
          <div class="editable input-frame">
            <input type="checkbox"
              data-field="operational"
              {% if x.operational %}checked{% endif %}>
            {% trans "Operational" %}
          </div>
        </div>
        <div>
          <div class="editable input-frame">
            <input type="checkbox"
              data-field="is_rs_peer"
              {% if x.is_rs_peer %}checked{% endif %}>
            {% trans "RS Peer" %}
          </div>
        </div>
      </div>
      <div class="col-1 right">
        <svg data-bs-toggle="tooltip" title="{{ x.reason }}" xmlns="http://www.w3.org/2000/svg" height="15px" viewBox="0 0 24 24" width="15px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>
      </div>
      <div class="col-12">
        <div class="row marg-top-15">
          <div class="col-3">
            <input type="hidden" data-field="suggestion_id" value="{{ x.id }}">
            <button type="button"
              class="btn btn-danger btn-sm dismiss"
              title="{% trans "Hide this suggestion until the exchange updates it." %}"
              data-bs-toggle="tooltip">{% trans "Dismiss" %}</button>
          </div>
          <div class="col-6 center">
            <div class="alert alert-compact alert-danger errors" style="display:none;"></div>
          </div>
          <div class="col-3 right">
            <button type="button"
              class="btn btn-default btn-sm add"
              title="{% trans "Add this entry to public peering exchange points" %}"
              data-bs-toggle="tooltip">{% trans "Add" %}</button>
          </div>
        </div>
      </div>
    </div>

    {% endif %}
    {% endfor %}

  </div>

  {% endif %}

  <!-- SUGGESTIONS: DELETE -->

  {% if ixf_proposals.delete %}

  <div class="row header header-delete">
    <div class="col-12">
      <div>{% trans "Remove" %}</div>
    </div>
  </div>

  <div class="suggestions-delete">

    {% for x in ixf_proposals.delete %}
    {% if not x.dismissed %}
    {% with ixf_id=x.ixf_id_pretty_str ix_name=x.ix.name %}

    <div class="row item {% if x.requirement_of %}hidden{% endif %}" data-ixf-id="{{ x.ixf_id_pretty_str }}">

      <div class="loading-shim" style="display:none;"></div>
      <div style="display:none">
        <div data-field="suggestion_id" data-value="{{ x.id }}"></div>
        <div data-field="id" data-value="{{ x.netixlan.id }}"></div>
      </div>
      <div class="col-5">
      {% if x.ipaddr4 %}{{ x.ipaddr4 }}{% else %}{% trans "IPv4 not set" %}{% endif %}
      </div>
      <div class="col-6">
      {% if x.ipaddr6 %}{{ x.ipaddr6 }}{% else %}{% trans "IPv6 not set" %}{% endif %}
      </div>
      <div class="col-1 right">
        <svg data-bs-toggle="tooltip" title="{{ x.reason }}" xmlns="http://www.w3.org/2000/svg" height="15px" viewBox="0 0 24 24" width="15px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>
      </div>
      <div class="col-12">
        <div class="row marg-top-15">
          <div class="col-3">
            <button type="button"
              class="btn btn-danger btn-sm dismiss"
              title="{% trans "Hide this suggestion until the exchange updates it." %}"
              data-bs-toggle="tooltip">{% trans "Dismiss" %}</button>
          </div>
          <div class="col-6 center">
            <div class="alert alert-compact alert-danger errors" style="display:none;"></div>
          </div>
          <div class="col-3 right">
            <button type="button"
              class="btn btn-default btn-sm delete"
              title="{% trans "Remove this entry from your public peering exchange points list" %}"
              data-confirm="{% blocktrans trimmed %}Remove the entry {{ ixf_id }} for {{ ix_name }} from your public peering exchange points list?{% endblocktrans %}"
              data-bs-toggle="tooltip">{% trans "Delete" %}</button>
          </div>
        </div>
      </div>

    </div>

    {% endwith %}
    {% endif %}
    {% endfor %}

  </div>

  {% endif %}

  <!-- SUGGESTIONS: MODIFY -->

  {% if ixf_proposals.modify %}

  <div class="row header header-modify">
    <div class="col-5">
      <div>{% trans "Update" %}</div>
    </div>
    <div class="col-7">
      <div>{% trans "Changes" %}</div>
    </div>
  </div>

  <div class="suggestions-modify">

    {% for x in ixf_proposals.modify %}
    {% if not x.dismissed %}

    <div class="row item" data-ixf-id="{{ x.ixf_id_pretty_str }}">

      <div class="loading-shim" style="display:none;"></div>
      <div style="display:none">
        <div data-field="suggestion_id" data-value="{{ x.id }}"></div>
        {% if x.primary_requirement %}
        <div data-field="id" data-value="{{ x.primary_requirement.netixlan.id }}"></div>
        {% else %}
        <div data-field="id" data-value="{{ x.netixlan.id }}"></div>
        {% endif %}

        {% for requirement in x.secondary_requirements %}
        <div data-ixf-require-delete="{{ requirement.ixf_id_pretty_str }}"></div>
        {% endfor %}

      </div>
      <div class="col-5">
        {% if x.net.ipv4_support %}
        <div data-field="ipaddr4" data-value="{{ x.ipaddr4|none_blank }}">
        {{ x.ipaddr4|none_blank }}
        </div>
        {% else %}
        <div data-field="ipaddr4" data-value="{{ x.netixlan.ipaddr4|none_blank }}">
        {{ x.netixlan.ipaddr4|none_blank }}
        </div>
        {% endif %}

        {% if x.net.ipv6_support %}
        <div data-field="ipaddr6" data-value="{{ x.ipaddr6|none_blank }}">
        {{ x.ipaddr6|none_blank }}
        </div>
        {% else %}
        <div data-field="ipaddr6" data-value="{{ x.netixlan.ipaddr6|none_blank }}">
        {{ x.netixlan.ipaddr6|none_blank }}
        </div>
        {% endif %}
      </div>
      <div class="col-6">
        <input type="hidden" data-field="ixlan_id" value="{{ x.ixlan_id }}">
        <input type="hidden" data-field="net_id" value="{{ x.net.id }}">
        <input type="hidden" data-field="asn" value="{{ x.asn }}">

        {% if x.modify_speed %}
        <input type="hidden" data-field="speed" value="{{ x.speed }}">
        {% else %}
        <input type="hidden" data-field="speed" value="{% if x.primary_requirement %}{{ x.primary_requirement.speed }}{% else %}{{ x.netixlan.speed }}{% endif %}">
        {% endif %}


        {% if x.modify_is_rs_peer %}
        <input type="checkbox" style="display:none" data-field="is_rs_peer" {% if x.is_rs_peer %}checked{% endif %}>
        {% elif x.primary_requirement %}
        <input type="checkbox" style="display:none" data-field="is_rs_peer" {% if x.primary_requirement.is_rs_peer %}checked{% endif %}>
        {% else %}
        <input type="checkbox" style="display:none" data-field="is_rs_peer" {% if x.netixlan.is_rs_peer %}checked{% endif %}>
        {% endif %}

        <input type="checkbox" style="display:none" data-field="operational" {% if x.operational %}checked{% endif %}>

        {% if x.ipaddr4_on_requirement  %}
        <div class="ixf-suggested-change">
          {% if x.ipaddr6 %}
          <span class="field_name">{% trans "Set IPv6 address" %}</span>
          {% else %}
          <span class="field_name">{% trans "Clear IPv6 address" %}</span>
          {% endif %}
        </div>
        {% elif x.ipaddr6_on_requirement %}
        <div class="ixf-suggested-change">
          {% if x.ipaddr4 %}
          <span class="field_name">{% trans "Set IPv4 address" %}</span>
          {% else %}
          <span class="field_name">{% trans "Clear IPv4 address" %}</span>
          {% endif %}
        </div>
        {% endif %}

        {% if x.changes.speed %}
        <div class="ixf-suggested-change">
          <span class="field_name">{% trans "Speed" %}</span>:
          <span class="old-value">{{ x.changes.speed.from|pretty_speed }}</span>
          <svg data-bs-toggle="tooltip" title="{{ x.reason }}" xmlns="http://www.w3.org/2000/svg" height="15px" viewBox="0 0 24 24" width="15px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>
          <span class="new-value">{{ x.changes.speed.to|pretty_speed }}</span>
        </div>
        {% endif %}

        {% if x.changes.is_rs_peer %}
        <div class="ixf-suggested-change">
          <span class="field_name">{% trans "RS Peer" %}</span>:
          <span class="old-value">
            <img class="checkmark" src="{% static "checkmark" %}{% if not x.changes.is_rs_peer.from %}-off{% endif %}.png" />
          </span>
          <svg data-bs-toggle="tooltip" title="{{ x.reason }}" xmlns="http://www.w3.org/2000/svg" height="15px" viewBox="0 0 24 24" width="15px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>
          <span class="new-value">
            <img class="checkmark" src="{% static "checkmark" %}{% if not x.changes.is_rs_peer.to %}-off{% endif %}.png" />
          </span>
        </div>
        {% endif %}

        {% if x.changes.operational %}
        <div class="ixf-suggested-change">
          <span class="field_name">{% trans "Operational" %}</span>:
          <span class="old-value">
            <img class="checkmark" src="{% static "checkmark" %}{% if not x.changes.operational.from %}-off{% endif %}.png" />
          </span>
          <svg data-bs-toggle="tooltip" title="{{ x.reason }}" xmlns="http://www.w3.org/2000/svg" height="15px" viewBox="0 0 24 24" width="15px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>
          <span class="new-value">
            <img class="checkmark" src="{% static "checkmark" %}{% if not x.changes.operational.to %}-off{% endif %}.png" />
          </span>
        </div>
        {% endif %}


      </div>
      <div class="col-1 right">
        <svg data-bs-toggle="tooltip" title="{{ x.reason }}" xmlns="http://www.w3.org/2000/svg" height="15px" viewBox="0 0 24 24" width="15px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>
      </div>
      <div class="col-12">
        <div class="row marg-top-15">
          <div class="col-3">
            <button type="button"
              class="btn btn-danger btn-sm dismiss"
              title="{% trans "Hide this suggestion until the exchange updates it." %}"
              data-bs-toggle="tooltip">{% trans "Dismiss" %}</button>
          </div>
          <div class="col-6 center">
            <div class="alert alert-compact alert-danger errors" style="display:none;"></div>
          </div>
          <div class="col-3 right">
            <button type="button"
              class="btn btn-default btn-sm modify"
              title="{% trans "Update this entry in your public peering exchange points list. You will also need to save the network record to persist these changes after accepting them." %}"
              data-bs-toggle="tooltip">{% trans "Accept" %}</button>
          </div>
        </div>
      </div>

    </div>

    {% endif %}
    {% endfor %}

  </div>

  {% endif %}

  </div>


<!--
  <div class="row controls marg-top">
    <div class="col-6">
      <button data-bs-toggle="tooltip" title="{% trans "Will restore any active suggestions from this exchange that have been dismissed by the network" %}" type="button" class="btn btn-warning btn-sm reset-suggestions">{% trans "Reset Suggestions" %}</button>
    </div>

    <div class="col-6 right">
      <button data-bs-toggle="tooltip" title="{% trans "Will add all suggested entries" %}" type="button" class="btn btn-default btn-sm add">{% trans "Auto Add" %}</button>
    </div>
  </div>
-->
</div>
{% endwith %}
{% endfor %}

<script>
$(document).ready(() => {
  PeeringDB.ixf_proposals = new PeeringDB.IXFProposals();
});
</script>

</div>

{% endif %}