{% extends 'generic/object.html' %}

{% block content %}
  <div class="row mb-3">
    <div class="col col-md-6">
      <div class="card">
        <h5 class="card-header">ACL Extended Rule</h5>
        <div class="card-body">
          <table class="table table-hover attr-table">
            <tr>
              <th scope="row">Access List</th>
              <td>
                <a href="{{ object.access_list.get_absolute_url }}">{{ object.access_list }}</a>
              </td>
            </tr>
            <tr>
              <th scope="row">Description</th>
              <td>{{ object.description|placeholder }}</td>
            </tr>
            <tr>
              <th scope="row">Index</th>
              <td>{{ object.index }}</td>
            </tr>
          </table>
        </div>
      </div>
      {% include 'inc/panels/custom_fields.html' %}
      {% include 'inc/panels/tags.html' %}
    </div>
    <div class="col col-md-6">
      <div class="card">
        <h5 class="card-header">Details</h5>
        <div class="card-body">
          <table class="table table-hover attr-table">
            <tr>
              <th scope="row">Remark</th>
              <td>{{ object.get_remark_display|placeholder }}</td>
            </tr>
            <tr>
              <th scope="row">Protocol</th>
              <td>{{ object.get_protocol_display|placeholder }}</td>
            </tr>
            <tr>
              <th scope="row">Source Prefix</th>
              <td>
                {% if object.source_prefix %}
                  <a href="{{ object.source_prefix.get_absolute_url }}">{{ object.source_prefix }}</a>
                {% else %}
                  {{ ''|placeholder }}
                {% endif %}
              </td>
            </tr>
            <tr>
              <th scope="row">Source Ports</th>
              <td>{{ object.source_ports|join:", "|placeholder }}</td>
            </tr>
            <tr>
              <th scope="row">Destination Prefix</th>
              <td>
                {% if object.destination_prefix %}
                  <a href="{{ object.destination_prefix.get_absolute_url }}">{{ object.destination_prefix }}</a>
                {% else %}
                  {{ ''|placeholder }}
                {% endif %}
              </td>
            </tr>
            <tr>
              <th scope="row">Destination Ports</th>
              <td>{{ object.destination_ports|join:", "|placeholder }}</td>
            </tr>
            <tr>
              <th scope="row">Action</th>
              <td>{% badge object.get_action_display bg_color=object.get_action_color %}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
{% endblock content %}