{% extends 'base.html' %}
{% load buttons %}
{% load helpers %}
{% load static %}
{% load ui_framework %}

{% block breadcrumbs_wrapper %}{% render_breadcrumbs %}{% endblock %}

{% block extra_styles %}
    <style>
        .icon-preview {
            align-items: center;
            display: flex;
            color: #ffffff;
            flex: none;
            flex-direction: column;
            gap: 0.25rem;
            text-align: center;
            width: 5rem;
        }

        .icon-preview img {
            height: 1.5rem;
            width: 1.5rem;
        }
    </style>
{% endblock %}

{% block content %}
<!-- Begin example of "object_list.html" -->
    <div>
        <h1 class="align-items-center d-flex fs-2 gap-8 lh-sm py-6">
            <img
                alt="Nautobot chevron"
                class="flex-grow-0 flex-shrink-0 my-n6"
                role="presentation"
                src="{% static 'img/nautobot_chevron.svg' %}"
                style="width: 1.5rem;"
            />
            Object Listing
        </h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a>Statuses</a></li>
        </ol>
    </div>
    <div class="align-items-center d-flex gap-8 justify-content-end mb-16 d-print-none">
        <div class="btn-group">
            {% add_button content_type.model_class|validated_viewname:"add" %}
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="visually-hidden">Toggle Dropdown</span>
                <span class="mdi mdi-chevron-down"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-end" role="menu">
                {% job_import_button content_type list_element=True%}
                <li><hr class="dropdown-divider"></li>
                {% export_button content_type list_element=True %}
            </ul>
        </div>
        <div class="dropdown d-inline-flex">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                Actions
            </button>
            <ul class="dropdown-menu dropdown-menu-end" role="menu">
                {% job_import_button content_type list_element=True%}
                <li><hr class="dropdown-divider"></li>
                {% export_button content_type list_element=True %}
            </ul>
        </div>
        <div class="align-items-center d-flex gap-4">
            <button type="button" class="btn position-relative text-secondary" title="Saved Views" aria-expanded="false">
                <span class="mdi mdi-view-compact-outline" aria-hidden="true"></span>
                <span class="visually-hidden">Saved Views</span>
            </button>
            <button type="button" class="btn position-relative text-secondary" title="Add Filters">
                <span class="mdi mdi-filter" aria-hidden="true"></span>
                <span class="visually-hidden">Add Filters</span>
            </button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <form>
                {% include "panel_table.html" %}
                <div class="d-print-none mt-16 float-lg-start mt-lg-20">
                    <button type="submit" name="_edit" class="btn btn-warning btn-sm">
                        <span class="mdi mdi-pencil me-4"></span>Edit Selected
                    </button>
                    <button type="submit" name="_delete" class="btn btn-danger btn-sm">
                        <span class="mdi mdi-trash-can-outline me-4"></span>Delete Selected
                    </button>
                </div>
            </form>
        <!-- Begin nested example of "inc/paginator.html" -->
            <div class="paginator align-items-center d-flex fs-5 gap-10 justify-content-end mt-16 text-secondary">
                <div>
                    Showing 50-75 of 250
                </div>
                <div class="vr border-start my-8"></div>
                <form class="align-items-center d-flex gap-4" method="get">
                    <select name="per_page" id="per_page" class="form-select">
                        <option value="25" selected="selected">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                    per page
                </form>
                <div class="vr border-start my-8"></div>
                <nav>
                    <ul class="pagination mb-0">
                        <li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item active"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">4</a></li>
                        <li class="page-item"><a class="page-link" href="#">5</a></li>
                        <li class="page-item disabled"><a class="page-link" tabindex="-1">&hellip;</a></li>
                        <li class="page-item"><a class="page-link" href="#">10</a></li>
                        <li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
                    </ul>
                </nav>
            </div>
        <!-- End nested example of "inc/paginator.html" -->
        </div>
    </div>
<!-- End example of "object_list.html" -->
    <hr class="border-top">

<!-- Begin example of "object_retrieve.html" -->
    <div>
        <h1 class="align-items-center d-flex fs-2 gap-8 lh-sm py-6">
            <img
                alt="Nautobot chevron"
                class="flex-grow-0 flex-shrink-0 my-n6"
                role="presentation"
                src="{% static 'img/nautobot_chevron.svg' %}"
                style="width: 1.5rem;"
            />
            <span class="d-flex gap-4">
                <span>Object Detail</span>
                <button type="button" class="btn btn-secondary nb-btn-inline-hover" data-clipboard-text="Object Detail">
                    <span aria-hidden="true" class="mdi mdi-content-copy"></span>
                    <span class="visually-hidden">Copy</span>
                </button>
            </span>
        </h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Statuses</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ object|hyperlinked_object }}</li>
        </ol>
    </div>
    <ul class="nav nav-tabs mb-16 mt-12">
        <li role="presentation" class="nav-item"><a class="nav-link active">Object</a></li>
        <li role="presentation" class="nav-item"><a class="nav-link">Advanced</a></li>
        <li role="presentation" class="nav-item"><a class="nav-link">Notes</a></li>
        <li role="presentation" class="nav-item"><a class="nav-link">Change Log</a></li>
    </ul>
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active">
            <div class="align-items-center d-flex flex-wrap mb-16">
                {% include 'inc/created_updated.html' %}
                <div class="flex-grow-0 flex-shrink-0 d-print-none">
                    {% consolidate_detail_view_action_buttons %}
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <strong>Status</strong>
                            <a class="btn stretched-link nb-collapse-toggle" role="button" aria-expanded="true">
                                <span class="mdi mdi-chevron-down"></span>
                            </a>
                        </div>
                        <table class="table table-hover attr-table">
                            <tr>
                                <td>Name</td>
                                <td>{{ object.name }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <strong>Right Side</strong>
                            <a class="btn stretched-link nb-collapse-toggle" role="button" aria-expanded="true">
                                <span class="mdi mdi-chevron-down"></span>
                            </a>
                        </div>
                        <table class="table table-hover attr-table">
                            <tr>
                                <td>Property</td>
                                <td>Value</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- End example of "object_retrieve.html" -->
    <hr class="border-top">

<!-- Begin example of "object_create.html" -->
    <div>
        <h1 class="align-items-center d-flex fs-2 gap-8 lh-sm py-6">
            <img
                alt="Nautobot chevron"
                class="flex-grow-0 flex-shrink-0 my-n6"
                role="presentation"
                src="{% static 'img/nautobot_chevron.svg' %}"
                style="width: 1.5rem;"
            />
            Add a new object
        </h1>
    </div>
    <form class="vstack">
        <div class="row align-content-start flex-fill">
            <div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1">
                <h3>
                    <a class="btn btn-link btn-sm float-end" title="Help">
                        <span aria-hidden="true" class="mdi mdi-help-circle"></span>
                    </a>
                </h3>
                <div class="card">
                    <div class="card-header"><strong>Object</strong></div>
                    <div class="card-body">
                        <div class="mb-10 d-flex justify-content-center">
                            <label class="col-md-3 col-form-label" for="id_name">Name</label>
                            <div class="col-md-9">
                                <input type="text" name="name" class="form-control" placeholder="Name" id="id_name">
                            </div>
                        </div>
                        <div class="mb-10 d-flex justify-content-center">
                            <label class="col-md-3 col-form-label nb-required" for="id_status">
                                Status
                            </label>
                            <div class="col-md-9">
                                <select name="status" class="nautobot-select2-api form-control select2-hidden-accessible" data-query-param-content_types="[&quot;dcim.device&quot;]" display-field="display" value-field="id" data-depth="0" required="" placeholder="Status" data-url="/api/extras/statuses/" id="id_status">
                                </select>
                                <span class="form-text">Help text for this form field</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nb-form-sticky-footer">
            <button type="submit" class="btn btn-primary">Create</button>
            <button type="submit" class="btn btn-primary">Create and Add Another</button>
            <a class="btn btn-secondary">Cancel</a>
        </div>
    </form>
<!-- End example of "object_create.html" -->
    <hr class="border-top">

<!-- Begin example of form controls -->
    <h1>Forms</h1>
    <form class="row">
        <div class="col-md-4">
            <fieldset class="mb-16">
                <legend>Textboxes</legend>
                <div class="nb-form-group">
                    <label class="form-label" for="example-form-control-name">Name</label>
                    <input class="form-control" id="example-form-control-name" name="name" placeholder="Type..." type="text">
                </div>
                <div class="nb-form-group">
                    <label class="form-label" for="example-form-control-description-prepopulated">Description [Prepopulated]</label>
                    <input class="form-control" id="example-form-control-description-prepopulated" name="description" placeholder="Type..." type="text" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
                </div>
                <div class="nb-form-group">
                    <label for="example-form-control-note" class="form-label">Note</label>
                    <textarea class="form-control" cols="40" id="example-form-control-note" placeholder="Type..." rows="10"></textarea>
                </div>
            </fieldset>
        </div>

        <div class="col-md-4">
            <fieldset class="mb-16">
                <legend>Comboboxes</legend>
                <div class="nb-form-group">
                    <label for="example-form-control-status">Status</label>
                    <select
                        class="form-control nautobot-select2-api"
                        data-depth="0"
                        data-query-param-content_types="[&quot;dcim.device&quot;]"
                        data-url="/api/extras/statuses/"
                        display-field="display"
                        id="example-form-control-status"
                        name="status"
                        placeholder="Select..."
                        value-field="id"
                    ></select>
                </div>
                <div class="nb-form-group">
                    <label for="example-form-control-role-prepopulated">Role [Prepopulated]</label>
                    <select
                        class="form-control nautobot-select2-api"
                        data-depth="0"
                        data-query-param-content_types="[&quot;dcim.device&quot;]"
                        data-query-param-exclude_m2m="[&quot;true&quot;]"
                        data-url="/api/extras/roles/"
                        display-field="display"
                        id="example-form-control-role-prepopulated"
                        name="role"
                        placeholder="Select..."
                        value-field="id"
                    >
                        <option value="ca47734b-4e50-4730-a2d7-6e7c768f9aaa" selected>My Role</option>
                    </select>
                </div>
                <div class="nb-form-group">
                    <label for="example-form-control-tags">Tags</label>
                    <select
                        class="form-control nautobot-select2-api"
                        data-depth="0"
                        data-query-param-content_types="[&quot;dcim.device&quot;]"
                        data-url="/api/extras/tags/"
                        display-field="display"
                        id="example-form-control-tags"
                        multiple="multiple"
                        name="tags"
                        placeholder="Select..."
                        value-field="id"
                    ></select>
                </div>
                <div class="nb-form-group">
                    <label for="example-form-control-dynamic-groups-prepopulated">Dynamic Groups [Prepopulated]</label>
                    <select
                        class="nautobot-select2-api form-control"
                        data-depth="0"
                        data-multiple="1"
                        data-query-param-content_type="[&quot;dcim.device&quot;]"
                        data-query-param-exclude_m2m="[&quot;true&quot;]"
                        data-query-param-group_type="[&quot;static&quot;]"
                        data-url="/api/extras/dynamic-groups/"
                        display-field="display"
                        id="example-form-control-dynamic-groups-prepopulated"
                        multiple="multiple"
                        name="dynamic_groups"
                        placeholder="Select..."
                        value-field="name"
                    >
                        <option value="2f31a150-4b09-44dc-a2ad-90004367c943" selected>My Dynamic Group 1</option>
                        <option value="5c2ed7ba-b823-44a0-aef9-44b01b2b92d9" selected>My Dynamic Group 2</option>
                    </select>
                </div>
            </fieldset>
        </div>

        <div class="col-md-4">
            <fieldset class="mb-16">
                <legend>Checkboxes</legend>
                <div class="form-check">
                    <input class="form-check-input" id="example-form-control-checkbox-1" name="example-form-control-checkbox" type="checkbox" value="1">
                    <label class="form-check-label" for="example-form-control-checkbox-1">
                        Checkbox 1
                    </label>
                </div>
                <div class="form-check">
                    <input checked class="form-check-input" id="example-form-control-checkbox-2-preselected" name="example-form-control-checkbox" type="checkbox" value="2">
                    <label class="form-check-label" for="example-form-control-checkbox-2-preselected">
                        Checkbox 2 [Preselected]
                    </label>
                </div>
            </fieldset>

            <fieldset class="mb-16">
                <legend>Radios</legend>
                <div class="form-check">
                    <input class="form-check-input" id="example-form-control-radio-1" name="example-form-control-radio" type="radio" value="1">
                    <label class="form-check-label" for="example-form-control-radio-1">
                        Radio 1
                    </label>
                </div>
                <div class="form-check">
                    <input checked class="form-check-input" id="example-form-control-radio-2-preselected" name="example-form-control-radio" type="radio" value="2">
                    <label class="form-check-label" for="example-form-control-radio-2-preselected">
                        Radio 2 [Preselected]
                    </label>
                </div>
            </fieldset>

            <fieldset class="mb-16">
                <legend>Buttons</legend>
                <div class="hstack gap-8">
                    <button class="btn btn-primary" name="_apply" type="submit">
                        <span aria-hidden="true" class="mdi mdi-check me-4"></span><!--
                        -->Apply
                    </button>
                    <button class="btn btn-danger" name="_confirm" type="submit">
                        <span aria-hidden="true" class="mdi mdi-trash-can-outline me-4"></span><!--
                        -->Delete
                    </button>
                    <a class="btn btn-secondary" href="#">
                        <span aria-hidden="true" class="mdi mdi-close me-4"></span><!--
                        -->Cancel
                    </a>
                </div>
            </fieldset>
        </div>
    </form>
<!-- End example of form controls -->
    <hr class="border-top">

<!-- Begin example of home page panel -->
    <div class="nb-draggable-container nb-transition-fade">
        <div class="card nb-draggable">
            <div class="card-header nb-draggable-handle">
                <strong class="text-body nb-text-none">Home Page Panel</strong>
                <span class="btn stretched-link nb-collapse-toggle nb-cursor-unset" role="button" tabindex="0" aria-expanded="false">
                    <span class="mdi mdi-chevron-down"></span>
                </span>
            </div>
            <ul class="list-group collapse overflow-y-auto show">
                <li class="list-group-item">
                    <span class="badge bg-primary float-end my-1">123</span>
                    <h4 class="fw-normal lh-base"><a>Locations</a></h4>
                    <p class="fs-5 mb-0 mt-4 text-secondary">Hierarchical geographic locations</p>
                </li>
                <li class="list-group-item">
                    <span class="badge bg-primary float-end my-1"><span class="mdi mdi-lock" aria-hidden="true"></span></span>
                    <h4 class="fw-normal lh-base">Tenants</h4>
                    <p class="fs-5 mb-0 mt-4 text-secondary">Customers or departments</p>
                </li>
            </ul>
        </div>
    </div>
<!-- End example of home page panel -->
    <hr class="border-top">

    <div class="row">
        <div class="col-md-6">
            <h1>Buttons</h1>
            <div class="card">
                <div class="table-responsive">
                    <table class="table">
                        <tr>
                            <td><code>btn</code></td>
                            <td>
                                <button type="button" class="btn btn-secondary">Secondary</button>
                                <button type="button" class="btn btn-primary">Primary</button>
                                <button type="button" class="btn btn-success">Success</button>
                                <button type="button" class="btn btn-info">Info</button>
                                <button type="button" class="btn btn-warning">Warning</button>
                                <button type="button" class="btn btn-danger">Danger</button>
                                <button type="button" class="btn btn-link">Link</button>
                            </td>
                        </tr>
                        <tr>
                            <td><code>btn-sm</code></td>
                            <td>
                                <button type="button" class="btn btn-sm btn-secondary">Secondary</button>
                                <button type="button" class="btn btn-sm btn-primary">Primary</button>
                                <button type="button" class="btn btn-sm btn-success">Success</button>
                                <button type="button" class="btn btn-sm btn-info">Info</button>
                                <button type="button" class="btn btn-sm btn-warning">Warning</button>
                                <button type="button" class="btn btn-sm btn-danger">Danger</button>
                                <button type="button" class="btn btn-sm btn-link">Link</button>
                            </td>
                        </tr>
                        <tr>
                            <td><code>btn disabled</code></td>
                            <td>
                                <button type="button" class="btn btn-secondary disabled">Secondary</button>
                                <button type="button" class="btn btn-primary disabled">Primary</button>
                                <button type="button" class="btn btn-success disabled">Success</button>
                                <button type="button" class="btn btn-info disabled">Info</button>
                                <button type="button" class="btn btn-warning disabled">Warning</button>
                                <button type="button" class="btn btn-danger disabled">Danger</button>
                                <button type="button" class="btn btn-link disabled">Link</button>
                            </td>
                        </tr>
                        <tr>
                            <td><code>btn-group</code> like radio buttons</td>
                            <td>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-primary bg-primary nb-text-body-bg">Current Active Option</button>
                                    <button type="button" class="btn btn-primary">Alternative Option</button>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <h1>Headings and Labels</h1>
            <div class="card">
                <div class="card-body">
                    <h1>
                        h1. Heading 1
                        <small>title for most object views</small>
                        <span class="badge border">Secondary</span>
                        <span class="badge bg-primary">Primary</span>
                        <span class="badge border border-primary text-primary">Transparent</span>
                        <span class="badge bg-success">Success</span>
                        <span class="badge bg-info">Info</span>
                        <span class="badge bg-warning">Warning</span>
                        <span class="badge bg-danger">Danger</span>
                    </h1>
                    <h2>
                        h2. Heading 2
                        <small>used for special purposes such as Location detail "badges"</small>
                        <span class="badge border">Secondary</span>
                        <span class="badge bg-primary">Primary</span>
                        <span class="badge border border-primary text-primary">Transparent</span>
                        <span class="badge bg-success">Success</span>
                        <span class="badge bg-info">Info</span>
                        <span class="badge bg-warning">Warning</span>
                        <span class="badge bg-danger">Danger</span>
                    </h2>
                    <h3>
                        h3. Heading 3
                        <small>title for object create/edit forms</small>
                        <span class="badge border">Secondary</span>
                        <span class="badge bg-primary">Primary</span>
                        <span class="badge border border-primary text-primary">Transparent</span>
                        <span class="badge bg-success">Success</span>
                        <span class="badge bg-info">Info</span>
                        <span class="badge bg-warning">Warning</span>
                        <span class="badge bg-danger">Danger</span>
                    </h3>
                    <h4>
                        h4. Heading 4
                        <small>used in modal titles and a few others</small>
                        <span class="badge border">Secondary</span>
                        <span class="badge bg-primary">Primary</span>
                        <span class="badge border border-primary text-primary">Transparent</span>
                        <span class="badge bg-success">Success</span>
                        <span class="badge bg-info">Info</span>
                        <span class="badge bg-warning">Warning</span>
                        <span class="badge bg-danger">Danger</span>
                    </h4>
                    <h5>
                        h5. Heading 5
                        <small>used in user profiles and cable traces</small>
                        <span class="badge border">Secondary</span>
                        <span class="badge bg-primary">Primary</span>
                        <span class="badge border border-primary text-primary">Transparent</span>
                        <span class="badge bg-success">Success</span>
                        <span class="badge bg-info">Info</span>
                        <span class="badge bg-warning">Warning</span>
                        <span class="badge bg-danger">Danger</span>
                    </h5>
                    <h6>
                        h6. Heading 6
                        <small>Unused in core</small>
                        <span class="badge border">Secondary</span>
                        <span class="badge bg-primary">Primary</span>
                        <span class="badge border border-primary text-primary">Transparent</span>
                        <span class="badge bg-success">Success</span>
                        <span class="badge bg-info">Info</span>
                        <span class="badge bg-warning">Warning</span>
                        <span class="badge bg-danger">Danger</span>
                    </h6>
                    <p>
                        p. Paragraph
                        <small>Small text</small>
                        <span class="badge border">Secondary</span>
                        <span class="badge bg-primary">Primary</span>
                        <span class="badge border border-primary text-primary">Transparent</span>
                        <span class="badge bg-success">Success</span>
                        <span class="badge bg-info">Info</span>
                        <span class="badge bg-warning">Warning</span>
                        <span class="badge bg-danger">Danger</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <hr>

    <h1>Tables</h1>
    <div class="row">
        <div class="col-md-6">
            <h2>Card Table With Header</h2>
            <div class="card">
                <div class="card-header"><strong>Header Text</strong></div>
                <div class="table-responsive">
                    <table class="table table-hover nb-table-headings">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Username</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Larry</td>
                                <td>the Bird</td>
                                <td>@twitter</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <h2>Attribute Table for Object Detail View</h2>
            <div class="card">
                <div class="card-header">
                    <strong>Object Attributes</strong>
                    <a class="btn stretched-link nb-collapse-toggle" role="button" aria-expanded="true">
                        <span class="mdi mdi-chevron-down"></span>
                    </a>
                </div>
                <table class="table table-hover attr-table">
                    <tr>
                        <td>Attribute</td>
                        <td>Value</td>
                    </tr>
                    <tr>
                        <td>Attribute</td>
                        <td>Value</td>
                    </tr>
                    <tr>
                        <td>Attribute</td>
                        <td>Value</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="col-md-6">
            <h2>Table with colored rows</h2>
            <div class="card">
                <div class="table-responsive">
                    <table class="table table-hover nb-table-headings">
                        <thead>
                            <tr>
                                <th>Class</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="table-secondary"><td>Secondary</td></tr>
                            <tr class="table-success"><td>Success</td></tr>
                            <tr class="table-info"><td>Info</td></tr>
                            <tr class="table-warning"><td>Warning</td></tr>
                            <tr class="table-danger"><td>Danger</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <h2>Striped Table (not generally recommended)</h2>
            <div class="card">
                <div class="table-responsive">
                    <table class="table table-hover table-striped nb-table-headings">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Username</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Larry</td>
                                <td>the Bird</td>
                                <td>@twitter</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <h2>Bordered Table (not generally recommended)</h2>
            <div class="card">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered nb-table-headings">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Username</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td rowspan="2">1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                            </tr>
                            <tr>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@TwBootstrap</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td colspan="2">Larry the Bird</td>
                                <td>@twitter</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <hr class="border-top">

    <div class="row">
        <div class="col-sm-6">
            <h1>Alerts</h1>
            <div class="alert alert-success" role="alert">
                <strong>Well done!</strong> You successfully read this important alert message.
            </div>
            <div class="alert alert-info" role="alert">
                <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
            </div>
            <div class="alert alert-warning" role="alert">
                <strong>Warning!</strong> Best check yo self, you're not looking too good.
            </div>
            <div class="alert alert-danger" role="alert">
                <strong>Oh snap!</strong> Change a few things up and try submitting again.
            </div>
        </div>

        <div class="col-sm-6">
            <h1>Text Markup</h1>
        <pre><code>def hello():
    print("Hello World!")
    raise SystemExit()</code></pre>
            <div class="row">
                <div class="col-sm-6">
                <pre><code class="language-json">{
    "This": [
        "is",
        "JSON",
        "with",
        "syntax",
        "highlighting."
    ]
}</code></pre>
                </div>
                <div class="col-sm-6">
        <pre><code class="language-yaml">---
This:
  - is
  - YAML
  - with
  - syntax
  - highlighting.</code></pre>
                </div>
            </div>
            <div>
                This is some ordinary text.
                <span class="text-secondary">This is some secondary text.</span>
                <span class="text-primary">This is primary text.</span>
                <span class="text-success">This is success text.</span>
                <span class="text-info">This is info text.</span>
                <span class="text-warning">This is warning text.</span>
                <span class="text-danger">This is danger text.</span>
                <code>This is code text.</code>
                <kbd>This is kbd text.</kbd>
                <span class="text-bg-primary">This is text with a primary background.</span>
                <span class="text-bg-success">This is text with a success background.</span>
                <span class="text-bg-info">This is text with an info background.</span>
                <span class="text-bg-warning">This is text with a warning background.</span>
                <span class="text-bg-danger">This is text with a danger background.</span>
            </div>
        </div>
    </div>
    <hr class="border-top">

    <h1>Cards (former Panels)</h1>
    <div class="row">
        <div class="col-sm-4">
            <div class="card">
                <div class="card-header">
                    <h4>Default</h4>
                </div>
                <div class="card-body">
                    Card content
                </div>
            </div>
            <div class="card border-primary">
                <div class="card-header bg-primary-subtle border-primary text-body">
                    <h4>Primary</h4>
                </div>
                <div class="card-body">
                    Panel content
                </div>
                <div class="card-footer bg-primary-subtle border-primary text-body">
                    Panel footer
                </div>
            </div>
        </div><!-- /.col-sm-4 -->
        <div class="col-sm-4">
            <div class="card border-success">
                <div class="card-header bg-success-subtle border-success text-body">
                    <h4>Success</h4>
                </div>
                <div class="card-body">
                    Panel content
                </div>
            </div>
            <div class="card border-info">
                <div class="card-header bg-info-subtle border-info text-body">
                    <h4>Info</h4>
                </div>
                <div class="card-body">
                    Panel content
                </div>
                <div class="card-footer bg-info-subtle border-info text-body">
                    Panel footer
                </div>
            </div>
        </div><!-- /.col-sm-4 -->
        <div class="col-sm-4">
            <div class="card border-warning">
                <div class="card-header bg-warning-subtle border-warning text-body">
                    <h4>Warning</h4>
                </div>
                <div class="card-body">
                    Panel content
                </div>
            </div>
            <div class="card border-danger">
                <div class="card-header bg-danger-subtle border-danger text-body">
                    <h4>Danger</h4>
                </div>
                <div class="card-body">
                    Panel content
                </div>
                <div class="card-footer bg-danger-subtle border-danger text-body">
                    Panel footer
                </div>
            </div>
        </div><!-- /.col-sm-4 -->
    </div>
    <h2>Card with Nav Tabs</h2>
    <div class="row">
        <div class="col-sm-4">
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a class="nav-link active" data-bs-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">Tab 1</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" data-bs-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">Tab 2</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" data-bs-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">Tab 3</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
                            Tab 1 content
                        </div>
                        <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
                            Tab 2 content
                        </div>
                        <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
                            Tab 3 content
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- /.col-sm-4 -->
    </div>


    <hr>
    <h1>Utilization graphs</h1>
    <p><i>Note: These progress bars use the <code>utilization_graph</code> template tags.</i></p>
    <div class="row">
        <div class="col-md-4">
            {% utilization_graph_raw_data 50 100 %}
            {% utilization_graph_raw_data 25 100 %}
        </div>
        <div class="col-md-4">
            {% utilization_graph_raw_data 75 100 %}
        </div>
        <div class="col-md-4">
            {% utilization_graph_raw_data 100 100 %}
        </div>
    </div>
    <hr>
    <h1>Progress bars</h1>
    <p><i>Note: These progress bars are Bootstrap primitives.</i></p>
    <div class="row">
        <div class="col-md-4">
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60%</div>
            </div>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">40%</div>
            </div>
            <div class="progress">
                <span>20%</span>
                <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="progress">
                <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60% (with bg-danger)</div>
            </div>
            <div class="progress">
                <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">40% (with bg-warning)</div>
            </div>
            <div class="progress">
                <span>20% (with bg-success)</span>
                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="progress">
                <div class="progress-bar progress-bar-striped bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60% (with bg-success)</div>
            </div>
            <div class="progress">
                <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">40%</div>
            </div>
            <div class="progress">
                <span>20%</span>
                <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div>
            </div>
        </div>
    </div>
    <hr>


    <h1>List groups</h1>
    <div class="row">
        <div class="col-sm-4">
            <ul class="list-group">
                <li class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Morbi leo risus</li>
                <li class="list-group-item">Porta ac consectetur ac</li>
                <li class="list-group-item">Vestibulum at eros</li>
            </ul>
        </div><!-- /.col-sm-4 -->
        <div class="col-sm-4">
            <div class="list-group">
                <a href="#" class="list-group-item active">
                    Cras justo odio
                </a>
                <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
                <a href="#" class="list-group-item">Morbi leo risus</a>
                <a href="#" class="list-group-item">Porta ac consectetur ac</a>
                <a href="#" class="list-group-item">Vestibulum at eros</a>
            </div>
        </div><!-- /.col-sm-4 -->
        <div class="col-sm-4">
            <div class="list-group">
                <a href="#" class="list-group-item active">
                    <h4>List group item heading</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                </a>
                <a href="#" class="list-group-item">
                    <h4>List group item heading</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                </a>
                <a href="#" class="list-group-item">
                    <h4>List group item heading</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                </a>
            </div>
        </div><!-- /.col-sm-4 -->
    </div>
    <hr class="border-top">

    <div class="row">
        <div class="col-md-3">
            <h1>Badges</h1>
            <p>
                <a href="#">Inbox <span class="badge bg-primary">42</span></a>
            </p>
            <ul class="nav nav-tabs mb-16" role="tablist">
                <li class="nav-item" role="presentation"><a class="nav-link active" href="#">Home <span class="badge bg-primary">42</span></a></li>
                <li class="nav-item" role="presentation"><a class="nav-link" href="#">Profile</a></li>
                <li class="nav-item" role="presentation"><a class="nav-link" href="#">Messages <span class="badge bg-primary">3</span></a></li>
            </ul>
            <p>
                <span class="badge nb-multi-badge">
                    Multi-badge:
                    <span class="nb-multi-badge-items">
                        <span class="badge">Badge</span>
                        <span class="badge">Badge</span>
                    </span>
                </span>
            </p>
            <p>
                <span class="badge nb-multi-badge">
                    <button type="button">
                        <span aria-hidden="true" class="mdi mdi-close"></span>
                        <span class="visually-hidden">Remove All</span>
                    </button>
                    Multi-badge:
                    <span class="nb-multi-badge-items">
                        <span class="badge"><!--
                        --><button type="button">
                            <span aria-hidden="true" class="mdi mdi-close"></span>
                            <span class="visually-hidden">Remove</span>
                        </button><!--
                        -->Badge
                        </span>
                        <span class="badge"><!--
                        --><button type="button">
                            <span aria-hidden="true" class="mdi mdi-close"></span>
                            <span class="visually-hidden">Remove</span>
                        </button><!--
                        -->Badge
                        </span>
                    </span>
                </span>
            </p>
        </div>
        <div class="col-md-3">
            <h1>Dropdown menus</h1>
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
                    Dropdown<span class="mdi mdi-chevron-down ms-4" aria-hidden="true"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item active" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item active" href="#">Separated link</a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-6">
            <h1>Navs</h1>
            <ul class="nav nav-tabs mb-16" role="tablist">
                <li class="nav-item" role="presentation"><a class="nav-link active" href="#">Home</a></li>
                <li class="nav-item" role="presentation"><a class="nav-link" href="#">Profile</a></li>
                <li class="nav-item" role="presentation"><a class="nav-link" href="#">Messages</a></li>
            </ul>
            <ul class="nav nav-pills" role="tablist">
                <li class="nav-item" role="presentation"><a class="nav-link active" href="#">Home</a></li>
                <li class="nav-item" role="presentation"><a class="nav-link" href="#">Profile</a></li>
                <li class="nav-item" role="presentation"><a class="nav-link" href="#">Messages</a></li>
            </ul>
        </div>
    </div>
    <hr class="border-top">

    <h1>Navbars</h1>
    <div class="row">
        <div class="col-md-6">
            <nav class="navbar bg-body-tertiary">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">Project name</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-example-1" aria-controls="navbar-example-1" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbar-example-1">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="#">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">About</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Contact</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    Dropdown<span class="mdi mdi-chevron-down align-top ms-4" aria-hidden="true"></span>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">Action</a></li>
                                    <li><a class="dropdown-item" href="#">Another action</a></li>
                                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><h6 class="dropdown-header">Nav header</h6></li>
                                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                                    <li><a class="dropdown-item" href="#">One more separated link</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <hr class="border-top">

    <h1>Nautobot Icons</h1>
    <div class="row">
        <div class="col-12">
            <div class="column-gap-8 d-flex flex-wrap px-20 py-16 rounded row-gap-16" style="background-color: #121212;">
                <div class="icon-preview"><img alt="360-degrees icon" src="{% static 'nautobot-icons/360-degrees.svg' %}">360-degrees</div>
                <div class="icon-preview"><img alt="arrow-decision icon" src="{% static 'nautobot-icons/arrow-decision.svg' %}">arrow-decision</div>
                <div class="icon-preview"><img alt="arrows-expand-rec icon" src="{% static 'nautobot-icons/arrows-expand-rec.svg' %}">arrows-expand-rec</div>
                <div class="icon-preview"><img alt="arrows-move-rec icon" src="{% static 'nautobot-icons/arrows-move-rec.svg' %}">arrows-move-rec</div>
                <div class="icon-preview"><img alt="arrows-move-2-rec icon" src="{% static 'nautobot-icons/arrows-move-2-rec.svg' %}">arrows-move-2-rec</div>
                <div class="icon-preview"><img alt="atom icon" src="{% static 'nautobot-icons/atom.svg' %}">atom</div>
                <div class="icon-preview"><img alt="power icon" src="{% static 'nautobot-icons/battery-3.svg' %}">battery-3</div>
                <div class="icon-preview"><img alt="branch icon" src="{% static 'nautobot-icons/branch.svg' %}">branch</div>
                <div class="icon-preview"><img alt="briefcase-2 icon" src="{% static 'nautobot-icons/briefcase-2.svg' %}">briefcase-2</div>
                <div class="icon-preview"><img alt="bus-globe icon" src="{% static 'nautobot-icons/bus-globe.svg' %}">bus-globe</div>
                <div class="icon-preview"><img alt="bus-shield icon" src="{% static 'nautobot-icons/bus-shield.svg' %}">bus-shield</div>
                <div class="icon-preview"><img alt="bus-shield-check icon" src="{% static 'nautobot-icons/bus-shield-check.svg' %}">bus-shield-check</div>
                <div class="icon-preview"><img alt="cable-data icon" src="{% static 'nautobot-icons/cable-data.svg' %}">cable-data</div>
                <div class="icon-preview"><img alt="cable-data-2 icon" src="{% static 'nautobot-icons/cable-data-2.svg' %}">cable-data-2</div>
                <div class="icon-preview"><img alt="cast icon" src="{% static 'nautobot-icons/cast.svg' %}">cast</div>
                <div class="icon-preview"><img alt="check-circle icon" src="{% static 'nautobot-icons/check-circle.svg' %}">check-circle</div>
                <div class="icon-preview"><img alt="checkbox-circle icon" src="{% static 'nautobot-icons/checkbox-circle.svg' %}">checkbox-circle</div>
                <div class="icon-preview"><img alt="checkbox-rec icon" src="{% static 'nautobot-icons/checkbox-rec.svg' %}">checkbox-rec</div>
                <div class="icon-preview"><img alt="cloud icon" src="{% static 'nautobot-icons/cloud.svg' %}">cloud</div>
                <div class="icon-preview"><img alt="cloud-check icon" src="{% static 'nautobot-icons/cloud-check.svg' %}">cloud-check</div>
                <div class="icon-preview"><img alt="cloud-lightning icon" src="{% static 'nautobot-icons/cloud-lightning.svg' %}">cloud-lightning</div>
                <div class="icon-preview"><img alt="cloud-upload icon" src="{% static 'nautobot-icons/cloud-upload.svg' %}">cloud-upload</div>
                <div class="icon-preview"><img alt="compass icon" src="{% static 'nautobot-icons/compass.svg' %}">compass</div>
                <div class="icon-preview"><img alt="control-panel icon" src="{% static 'nautobot-icons/control-panel.svg' %}">control-panel</div>
                <div class="icon-preview"><img alt="credit-card icon" src="{% static 'nautobot-icons/credit-card.svg' %}">credit-card</div>
                <div class="icon-preview"><img alt="device-lifecycle icon" src="{% static 'nautobot-icons/device-lifecycle.svg' %}">device-lifecycle</div>
                <div class="icon-preview"><img alt="direction icon" src="{% static 'nautobot-icons/direction.svg' %}">direction</div>
                <div class="icon-preview"><img alt="elements icon" src="{% static 'nautobot-icons/elements.svg' %}">elements</div>
                <div class="icon-preview"><img alt="extensibility icon" src="{% static 'nautobot-icons/extensibility.svg' %}">extensibility</div>
                <div class="icon-preview"><img alt="globe icon" src="{% static 'nautobot-icons/globe.svg' %}">globe</div>
                <div class="icon-preview"><img alt="globe-2 icon" src="{% static 'nautobot-icons/globe-2.svg' %}">globe-2</div>
                <div class="icon-preview"><img alt="hammer icon" src="{% static 'nautobot-icons/hammer.svg' %}">hammer</div>
                <div class="icon-preview"><img alt="history icon" src="{% static 'nautobot-icons/history.svg' %}">history</div>
                <div class="icon-preview"><img alt="ip icon" src="{% static 'nautobot-icons/ip.svg' %}">ip</div>
                <div class="icon-preview"><img alt="laptop icon" src="{% static 'nautobot-icons/laptop.svg' %}">laptop</div>
                <div class="icon-preview"><img alt="lightning icon" src="{% static 'nautobot-icons/lightning.svg' %}">lightning</div>
                <div class="icon-preview"><img alt="list-unordered icon" src="{% static 'nautobot-icons/list-unordered.svg' %}">list-unordered</div>
                <div class="icon-preview"><img alt="map-view icon" src="{% static 'nautobot-icons/map-view.svg' %}">map-view</div>
                <div class="icon-preview"><img alt="organization icon" src="{% static 'nautobot-icons/organization.svg' %}">organization</div>
                <div class="icon-preview"><img alt="pin-2 icon" src="{% static 'nautobot-icons/pin-2.svg' %}">pin-2</div>
                <div class="icon-preview"><img alt="pin-3 icon" src="{% static 'nautobot-icons/pin-3.svg' %}">pin-3</div>
                <div class="icon-preview"><img alt="plug icon" src="{% static 'nautobot-icons/plug.svg' %}">plug</div>
                <div class="icon-preview"><img alt="refresh-cw icon" src="{% static 'nautobot-icons/refresh-cw.svg' %}">refresh-cw</div>
                <div class="icon-preview"><img alt="rocket-2 icon" src="{% static 'nautobot-icons/rocket-2.svg' %}">rocket-2</div>
                <div class="icon-preview"><img alt="rotate-cw icon" src="{% static 'nautobot-icons/rotate-cw.svg' %}">rotate-cw</div>
                <div class="icon-preview"><img alt="route icon" src="{% static 'nautobot-icons/route.svg' %}">route</div>
                <div class="icon-preview"><img alt="secrets icon" src="{% static 'nautobot-icons/secrets.svg' %}">secrets</div>
                <div class="icon-preview"><img alt="security icon" src="{% static 'nautobot-icons/security.svg' %}">security</div>
                <div class="icon-preview"><img alt="server icon" src="{% static 'nautobot-icons/server.svg' %}">server</div>
                <div class="icon-preview"><img alt="server-2 icon" src="{% static 'nautobot-icons/server-2.svg' %}">server-2</div>
                <div class="icon-preview"><img alt="share icon" src="{% static 'nautobot-icons/share.svg' %}">share</div>
                <div class="icon-preview"><img alt="shield-check icon" src="{% static 'nautobot-icons/shield-check.svg' %}">shield-check</div>
                <div class="icon-preview"><img alt="sitemap-outline icon" src="{% static 'nautobot-icons/sitemap-outline.svg' %}">sitemap-outline</div>
                <div class="icon-preview"><img alt="sliders-vert icon" src="{% static 'nautobot-icons/sliders-vert.svg' %}">sliders-vert</div>
                <div class="icon-preview"><img alt="sliders-vert-2 icon" src="{% static 'nautobot-icons/sliders-vert-2.svg' %}">sliders-vert-2</div>
                <div class="icon-preview"><img alt="star icon" src="{% static 'nautobot-icons/star.svg' %}">star</div>
                <div class="icon-preview"><img alt="star-filled icon" src="{% static 'nautobot-icons/star-filled.svg' %}">star-filled</div>
                <div class="icon-preview"><img alt="transform icon" src="{% static 'nautobot-icons/transform.svg' %}">transform</div>
                <div class="icon-preview"><img alt="wifi icon" src="{% static 'nautobot-icons/wifi.svg' %}">wifi</div>
            </div>
        </div>
    </div>
{% endblock %}