# Templates

## Bundles

As bundles, we see templates that load essential CSS and JavaScript and are used
throughout Alliance Auth. These bundles can also be used in your own apps, so you don't
have to load specific CSS or JavaScript yourself.

These bundles include DataTables CSS and JS, jQuery Datepicker CSS and JS, jQueryUI CSS and JS, and more.

A full list of bundles we provide can be found here: <https://gitlab.com/allianceauth/allianceauth/-/tree/master/allianceauth/templates/bundles>

To use a bundle, you can use the following code in your template (Example for jQueryUI):

```django
{% block extra_css %}
    {% include "bundles/jquery-ui-css.html" %}
{% endblock %}

{% block extra_javascript %}
    {% include "bundles/jquery-ui-js.html" %}
{% endblock %}
```

## Template Partials

To ensure a unified style language throughout Alliance Auth and Community Apps,
we also provide a couple of template partials. This collection is bound to grow over
time, so best have an eye on this page.

### Dashboard Widget Title

To ensure the dashboard widgets have a unified style, we provide a template partial for the widget title.

To use it, you can use the following code in your dashboard widget template:

```django
<div id="my-app-dashboard-widget" class="col-12 mb-3">
    <div class="card">
        <div class="card-body">
            {% translate "My Widget Title" as widget_title %}
            {% include "framework/dashboard/widget-title.html" with title=widget_title %}

            <div>
                <p>My widget content</p>
            </div>
        </div>
    </div>
</div>
```

### Page Header

On some pages you want to have a page header. To make this easier, we provide a template partial for this.

To use it, you can use the following code in your template:

```django
{% block content %}
    <div>
        {% translate "My Page Header" as page_header %}
        {% translate "My Page Header Subtitle" as optional_subtitle %}
        {% include "framework/header/page-header.html" with title=page_header subtitle=optional_subtitle %}

        <p>My page content</p>
    </div>
{% endblock %}
```

### Top Navigation Buttons

To ensure a unified style for top navigation buttons, we provide a template partial for this.
To use it, you can use the following code in your template:

```django
{% block header_nav_collapse_right %}
    {% translate "My Awesome Link" as nav_item_title %}
    {% url "my_app:my_function" as nav_item_link %}
    {% include "framework/header/nav-collapse-button.html" with btn_modifier="success" url=nav_item_link title=nav_item_title fa_icon="fa-solid fa-plus" icon_on_mobile=True icon_on_desktop=True %}
{% endblock header_nav_collapse_right %}
```

This template takes care of the mobile responsiveness and the styling. In mobile view,
the button will be changed to a text link. The icon will be placed in front of the text
link if `icon_on_mobile` is set to `True`.

#### Button Parameters

- `btn_modifier`: (Optional) The button modifier class, e.g. `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`, `link`. Default is `primary`.
- `url`: The URL the button should point to.
- `title`: The title of the button.
- `fa_icon`: (Optional) The FontAwesome icon class to use, e.g. `fa-solid fa-plus`.
- `icon_on_mobile`: (Optional) Boolean to indicate if the icon should be shown on mobile devices in front of the text link. Default is `False`.
- `icon_on_desktop`: (Optional) Boolean to indicate if the icon should be shown on desktop devices in front of the button text. Default is `False`.

### Top Navigation FontAwesome Icons

To ensure a unified style for top navigation FontAwesome icons, we provide a template partial for this.
To use it, you can use the following code in your template:

```django
{% block header_nav_collapse_right %}
    {% translate "My Awesome Link as FontAwesome Icon" as nav_item_title %}
    {% url "my_app:my_function" as nav_item_link %}
    {% include "framework/header/nav-collapse-icon.html" with fa_icon="fa-solid fa-check-double" url=nav_item_link title=nav_item_title icon_on_mobile=True %}
{% endblock header_nav_collapse_right %}
```

This template takes care of the mobile responsiveness and the styling. In mobile view,
the icon will be changed to a text link. The icon will be placed in front of the text
link if `icon_on_mobile` is set to `True`.

#### Icon Parameters

- `fa_icon`: The FontAwesome icon class to use, e.g. `fa-solid fa-check-double`.
- `url`: The URL the icon should point to.
- `title`: The title of the icon (used as tooltip).
- `icon_on_mobile`: (Optional) Boolean to indicate if the icon should be shown on mobile devices in front of the text link. Default is `False`.