{% extends 'base.html' %}
{% load helpers %}
{% load registry %}

{% block header %}
    {{ block.super }}
    {% if new_release %}
        {# new_release is set only if the current user is a superuser or staff member #}
        <div class="alert alert-info text-center" role="alert">
            <i class="mdi mdi-information-outline"></i>
            A new release is available: <a href="{{ new_release.url }}">Nautobot v{{ new_release.version }}</a> |
            <a href="https://docs.nautobot.com/projects/core/en/v{{ new_release.version }}/installation/upgrading/">Upgrade instructions</a>
        </div>
    {% endif %}
    <noscript>
        <style>
            #draggable-homepage-panels {
                opacity: 100 !important;
            }
            #draggable-homepage-panels .panel-heading {
                cursor: default;
            }
            .collapse-icon {
                display: none;
            }
        </style>
    </noscript>
{% endblock %}


{% block content %}
    {% registry %}
    {% if request.user.is_authenticated %}
        {% include 'search_form.html' %}
    {% endif %}
    <div class="row">
        <div class="col-sm-12">
            <div class="homepage_column" id="draggable-homepage-panels" style="columns: 4 360px">
                {% for panel_name, panel_details in registry.homepage_layout.panels.items %}
                    {% if request.user|has_one_or_more_perms:panel_details.permissions %}
                        <div class="panel panel-default" id="{{ panel_name|slugify }}" style="break-inside: avoid" data-panel-weight="{{ panel_details.weight }}">
                            {% with cookie_key='homepanel-'|add:panel_name|slugify %}
                                <div class="panel-heading">
                                    <strong>{{ panel_name }}</strong>
                                    <span id="collapse-icon-{{ panel_name|slugify }}" class="glyphicon glyphicon-chevron-down collapse-icon{% if request.COOKIES|default:''|get_item:cookie_key|default:'False' == 'False' %} rotated180{% endif %}" type="button" data-toggle="collapse" data-target="#homepanel-{{ panel_name|slugify }}" aria-expanded="false" aria-controls="homepanel-{{ panel_name|slugify }}"></span>
                                </div>
                                <div class="list-group collapse{% if request.COOKIES|default:''|get_item:cookie_key|default:'False' == 'False' %} in{% endif %} collapsible-div" id="homepanel-{{ panel_name|slugify }}" >
                            {% endwith %}
                            {% if panel_details.rendered_html %}
                                {% autoescape off %}{{ panel_details.rendered_html }}{% endautoescape %}
                            {% elif panel_details.items %}
                                {% for item_name, item_details in panel_details.items.items %}
                                    {% if item_details.rendered_html %}
                                        <div class="list-group-item" data-item-weight="{{ item_details.weight }}">
                                            {% if request.user|has_one_or_more_perms:item_details.permissions %}
                                                {% autoescape off %}{{ item_details.rendered_html }}{% endautoescape %}
                                            {% endif %}
                                        </div>
                                    {% elif not item_details.items.items %}
                                        {% if request.user|has_one_or_more_perms:item_details.permissions %}
                                            <div class="list-group-item" data-item-weight="{{ item_details.weight }}">
                                                {% if request.user|has_perms:item_details.permissions %}
                                                    <span class="badge pull-right">{{ item_details.count }}</span>
                                                    <h4 class="list-group-item-heading">
                                                            {% comment %}
                                                                Use 'url xxx as variable' so that an invalid
                                                                link doesn't throw a NoReverseMatch exception.
                                                            {% endcomment %}
                                                        {% url item_details.link as item_url %}
                                                        {% if item_url %}
                                                            <a href="{{ item_url }}">{{ item_name }}</a>
                                                        {% else %}
                                                            <a>ERROR: Invalid link!</a>
                                                        {% endif %}
                                                    </h4>
                                                {% else %}
                                                    <span class="badge pull-right"><i class="mdi mdi-lock"></i></span>
                                                    <h4 class="list-group-item-heading">{{ item_name }}</h4>
                                                {% endif %}
                                                <p class="list-group-item-text text-muted">{{ item_details.description }}</p>
                                            </div>
                                        {% endif %}
                                    {% else %}
                                        <div class="list-group-item" data-item-weight="{{ item_details.weight }}">
                                            <h4 class="list-group-item-heading">{{ item_name }}</h4>
                                            {% for group_item_name, group_item_details in item_details.items.items %}
                                                {% if request.user|has_one_or_more_perms:group_item_details.permissions %}
                                                    {% if request.user|has_perms:group_item_details.permissions %}
                                                        {% if group_item_details.rendered_html %}
                                                            {% autoescape off %}
                                                                {{ group_item_details.rendered_html }}
                                                            {% endautoescape %}
                                                        {% else %}
                                                            <span class="badge pull-right">{{ group_item_details.count }}</span>
                                                            <p style="padding-left: 20px;">
                                                                    {% comment %}
                                                                        Use 'url xxx as variable' so that an invalid
                                                                        link doesn't throw a NoReverseMatch exception.
                                                                    {% endcomment %}
                                                                {% url group_item_details.link as group_url %}
                                                                {% if group_url %}
                                                                    <a href="{{ group_url }}">{{ group_item_name }}</a>
                                                                {% else %}
                                                                    <a>ERROR: Invalid link!</a>
                                                                {% endif %}
                                                            </p>
                                                        {% endif %}
                                                    {% else %}
                                                        <span class="badge pull-right"><i class="mdi mdi-lock"></i></span>
                                                        <p style="padding-left: 20px;">{{ group_item_name }}</p>
                                                    {% endif %}
                                                {% endif %}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                        </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}
{% block javascript %}
    {{ block.super }}
    <script src="{% versioned_static 'js/homepage_layout.js' %}" onerror="nb.media.handleFailure(this)"></script>
{% endblock %}
