{% extends 'generic/object_retrieve.html' %}
{% load helpers %}
{% load plugins %}


{% block extra_nav_tabs %}
    <li role="presentation"{% if request.GET.tab == 'nat-policy-rules' %} class="active"{% endif %}>
        <a href="{{ object.get_absolute_url }}#nat-policy-rules" onclick="switch_tab(this.href)" aria-controls="advanced" role="tab" data-toggle="tab">
            NAT Policy Rules Expanded
        </a>
    </li>
    {% if perms.nautobot_firewall_models.edit_nat_policy %}
        <li role="presentation"{% if request.GET.tab == 'edit-nat-policy-device-weight' %} class="active"{% endif %}>
            <a href="{{ object.get_absolute_url }}#edit-nat-policy-device-weight" onclick="switch_tab(this.href)" aria-controls="advanced" role="tab" data-toggle="tab">
                Edit NAT Policy Weight On Assigned Device
            </a>
        </li>
    {% endif %}
    {% if perms.nautobot_firewall_models.edit_nat_policy %}
        <li role="presentation"{% if request.GET.tab == 'edit-nat-policy-dynamic-group-weight' %} class="active"{% endif %}>
            <a href="{{ object.get_absolute_url }}#edit-nat-policy-dynamic-group-weight" onclick="switch_tab(this.href)" aria-controls="advanced" role="tab" data-toggle="tab">
                Edit NAT Policy Weight On Assigned Dynamic Group
            </a>
        </li>
    {% endif %}
{% endblock extra_nav_tabs%}

{% block content %}
    <div class="tab-content">
        <div id="main" role="tabpanel" class="tab-pane {% if not active_tab and not request.GET.tab or request.GET.tab == "main" %}active{% else %}fade{% endif %}">
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <strong>NAT Policy</strong>
                        </div>
                        <table class="table table-hover panel-body attr-table">
                            <tr>
                                <td>Description</td>
                                <td>{{ object.description|placeholder }}</td>
                            </tr>
                            <tr>
                                <td>Devices</td>
                                <td>
                                    <ul>
                                        {% for i in object.assigned_devices.all %}
                                            <li><a href="{{ i.get_absolute_url }}">{{ i|placeholder }}</a></li>
                                        {% empty %}
                                            None
                                        {% endfor %}
                                    </ul>
                                </td>
                            </tr>
                            <tr>
                                <td>Dynamic Groups</td>
                                <td>
                                    <ul>
                                        {% for i in object.assigned_dynamic_groups.all %}
                                            <li><a href="{{ i.get_absolute_url }}">{{ i|placeholder }}</a></li>
                                        {% empty %}
                                            None
                                        {% endfor %}
                                    </ul>
                                </td>
                            </tr>
                            <tr>
                                <td>Tenant Group </td>
                                <td>{% if object.tenant and object.tenant.group %}<a href="{{ object.tenant.group.get_absolute_url }}">{{ object.tenant.group }}</a><br/>{% else %}{{ None|placeholder }}{% endif %}</td>
                            </tr>
                            <tr>
                                <td>Tenant</td>
                                <td>{% if object.tenant %}<a href="{{ object.tenant.get_absolute_url }}">{{ object.tenant }}</a><br/>{% else %}{{ None|placeholder }}{% endif %}</td>
                            </tr>
                            <tr>
                                <td>Status</td>
                                <td><span class="label" style="color: {{ object.status.color|fgcolor }}; background-color: #{{ object.status.color }}">{{ object.get_status_display }}</span></td>
                            </tr>
                        </table>
                    </div>
                    {% include 'inc/custom_fields/panel.html' with custom_fields=object.get_custom_fields_basic computed_fields_advanced_ui=False %}
                    {% include 'inc/relationships_panel.html' %}
                    {% include 'extras/inc/tags_panel.html' %}
                    {% plugin_left_page object %}
                </div>
                <div class="col-md-6">
                    {% block content_right_page %}{% endblock content_right_page %}
                    {% plugin_right_page object %}
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    {% block content_full_width_page %}{% endblock content_full_width_page %}
                    {% plugin_full_width_page object %}
                </div>
            </div>
        </div>
        <div id="advanced" role="tabpanel" class="tab-pane {% if request.GET.tab == 'advanced' %}active{% else %}fade{% endif %}">
            <div class="row">
                <div class="col-md-6">
                    {% include 'inc/object_details_advanced_panel.html' %}
                </div>
                <div class="col-md-6">
                    {% block advanced_content_right_page %}{% endblock advanced_content_right_page %}
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    {% block advanced_content_full_width_page %}{% endblock advanced_content_full_width_page %}
                </div>
            </div>
        </div>
        <div id="nat-policy-rules" role="tabpanel" class="tab-pane {% if request.GET.tab == 'nat-policy-rules' %}active{% else %}fade{% endif %}">
            {% include 'nautobot_firewall_models/inc/nat_policy_expanded_rules.html' %}
        </div>
        <div id="edit-nat-policy-device-weight" role="tabpanel" class="tab-pane {% if request.GET.tab == 'edit-nat-policy-device-weight' %}active{% else %}fade{% endif %}">
            {% include 'nautobot_firewall_models/inc/nat_policy_device_weight.html' %}
        </div>
        <div id="edit-nat-policy-dynamic-group-weight" role="tabpanel" class="tab-pane {% if request.GET.tab == 'edit-nat-policy-dynamic-group-weight' %}active{% else %}fade{% endif %}">
            {% include 'nautobot_firewall_models/inc/nat_policy_dynamic_group_weight.html' %}
        </div>
    </div>
{% endblock content %}
{% block javascript %}
    {{ block.super }}
    <script>$("span[data-toggle='tooltip']").tooltip()</script>
{% endblock %}