{% load static %}
{% load helpers %}
{% load plugins %}

<footer id="footer">
    <div class="container-fluid bg-body-secondary border-top text-secondary">
        <div class="row row-cols-1 row-cols-lg-3">
            <div class="col align-items-center d-flex flex-wrap fs-5 gap-8 justify-content-center lh-sm py-10 text-center flex-lg-nowrap justify-content-lg-start text-lg-start">
                {% if request.user.is_authenticated %}
                    {% if settings.BRANDING_FILEPATHS.logo and settings.BRANDING_POWERED_BY_URL %}
                        <a
                            class="align-items-center d-inline-flex fs-5 gap-4 my-n4 text-decoration-none"
                            href="{{ settings.BRANDING_POWERED_BY_URL }}"
                            target="_blank"
                        >
                            <img alt="Nautobot" src="{% static 'img/nautobot_logo.svg' %}" style="height: 1.25rem;" />
                            Powered
                        </a>
                        &middot;
                    {% endif %}
                    <span>
                        {{ settings.HOSTNAME }}
                        {% if request.user.is_authenticated %}
                            (v{{ settings.VERSION }})
                        {% endif %}
                    </span>
                {% endif %}
            </div>
            <div class="col fs-5 lh-sm py-10 text-center">
                {% now "SHORT_DATETIME_FORMAT" %}
            </div>
            <div class="col align-items-center d-flex flex-wrap gap-8 justify-content-center py-6 text-center flex-lg-nowrap justify-content-lg-end text-lg-end">
                {% if request.user.is_authenticated %}
                    <div class="d-flex" data-bs-toggle="tooltip" data-bs-title="Theme">
                        <a
                            data-bs-toggle="modal"
                            data-bs-target="#theme_modal"
                            href="#theme_modal"
                            id="btn-theme-modal"
                        >
                            <span class="mdi mdi-theme-light-dark"></span>
                        </a>
                    </div>
                    &middot;
                    <a
                        data-bs-toggle="tooltip"
                        data-bs-title="Docs"
                        href="{% if settings.BRANDING_URLS.docs %}{{ settings.BRANDING_URLS.docs }}{% else %}{% static 'docs/index.html' %}{% endif %}"
                        target="_blank"
                    >
                        <span class="mdi mdi-book-open-page-variant"></span>
                    </a>
                    &middot;
                    <a
                        data-bs-toggle="tooltip"
                        data-bs-title="Jinja Renderer"
                        href="{% url 'render_jinja_template' %}"
                        target="_blank"
                    >
                        <svg style="height: 1.25rem; width: 1.25rem;" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
                            <use href="{% static 'img/jinja_logo.svg' %}#jinja_logo" />
                        </svg>
                    </a>
                    &middot;
                    <a
                        data-bs-toggle="tooltip"
                        data-bs-title="API"
                        href="{% url 'api_docs' %}"
                        target="_blank"
                    >
                        <span class="mdi mdi-cloud-braces"></span>
                    </a>
                    &middot;
                    <a
                        data-bs-toggle="tooltip"
                        data-bs-title="GraphQL"
                        href="{% url 'graphql' %}"
                        target="_blank"
                    >
                        <span class="mdi mdi-graphql"></span>
                    </a>
                    &middot;
                    <a
                        data-bs-toggle="tooltip"
                        data-bs-title="Code"
                        href="{{ settings.BRANDING_URLS.code }}"
                        target="_blank"
                    >
                        <span class="mdi mdi-xml"></span>
                    </a>
                    &middot;
                    <a
                        data-bs-toggle="tooltip"
                        data-bs-title="Help"
                        href="{{ settings.BRANDING_URLS.help }}"
                        target="_blank"
                    >
                        <span class="mdi mdi-lifebuoy"></span>
                    </a>
                {% endif %}
            </div>
        </div>
    </div>
</footer>

{% include 'modals/modal_theme.html' with name='theme'%}