# Template structure
This document describes the HTML-template structure. This structure follows the idea of small completed components, which compose a website together. This approach helps to minimize the amount of needed HTML-code and therefore decreases the complexitiy and increases the readibility of the code. Furthermore, code-changes can be easily deployed to all sites of the website without rhe need for repetitive work.

In general, there are 2 types of HTML-templates:
    - page
    - partial-templates
The page templates are the entrypoint for the django-render-process. On these templates the django `render()`-function is called at the end of a django view function. An example for a view-function, which refers to one of the page-wide templates can be found inside the `pages/` folder. 
```
def Datenschutzhinweis(request):
    """Call render function for datenschutzhinweis page."""
    return render(request, "pages/Datenschutzhinweis.html")
```
The function `Datenschutzhinweis(request)` calls the `render()` function, with the argument `pages/Datenschutzhinweis.html`, which is a page-wide template.
The following code shows an example for a page-wide template:
```
{% extends 'base.html' %}
{% load i18n %}
{% block title %}{% translate "Geschäftsmodelle – good-practice" %}{% endblock %}

{% load static %}
{% block content %}
    <div class="content container">
        <div class="row">{% include "partials/descriptionContainer.html" %}</div>
        <div class="boxes" id="container-start-focus">
            {% include "common/fourBoxesContainer.html" %}
        </div>
{% endblock %}
```
This template includes two partial templates: The `descriptionContainer.html` and the `fourBoxesContainer.html`-template. With the `descriptionContainer.html`, a partial consisting of a heading and a description text can be included into a page. The text-content needs to be provided by the django-view. When calling the render-function with a page-wide template, a context-dictionary needs to be provided. That collection of key-value pairs need to have the following keys to render the `descriptionContainer.html` properly:
   
    - `focusBorder`: Can take one of the following string values: `ecological`, `operational`, `legal`, `technical`. With that key, the link-color of links inside the description text can be set to the focus-color.
    - pathToImage (optional key-value pair): Specifies a path to a image-icon, which will be displayed left to the heading.
    - `heading`: The heading of the description container.
    - `showMorePresent` (optional key-value pair): Key, which gets a boolean value to determine if the description text should be cut off after a number of character and a expandable box should be present to make the whole text visinble after clicking "show more". If `showMorePresent` is set to `True` the key `charNumberToShowCollapsed` needs to be present with a integer value, representing the number of character, which should be shown in the collapsed state of the collapsable-container.
    - `explanaitionText`: holds the text-content below the heading.

## Search Bar Template Documentation

The Search-Bar HTML-Template is used as a partial on all pages where a search through a collection of elements should be possible.
It makes it possible to search the elements through a text search and by different categories of filters. Furthermore it is possible to trigger the
coparison mode from within the search-bar. It can be included into a page-wide template by adding the following Django-template tag into a page-wide template at the position, where the search-bar should be shown:
```
    {% include "partials/search-bar.html" %}
```
After inlcuding the search-bar, the corresponding context needs to be set in the view-function, which renders the page-wide template. For the search-bar, the following key-value pairs need to be set in the context-dictionary:
    
    - `optionList`: List of dictionaries
        Based on the value of this key, the select-inputs will be created. The list-length specifies the number of select-elements, which will be rendered. Each list-item is a dictionary with the keys `placeholder`, `objects` and `fieldName`. `placeholder` is put as a placeholder on the select-element. `objects` holds a list of elements, which will be shown as items inside the select input. `fieldName` holds the name of the database attribute name.