{% macro render(props) -%}
<div class="sidebar">
  <!-- Rendering the logo in the header -->
  <div class="sidebar__header">
    {{sidebarLogo(props)}}
  </div>

  <!-- Contents for the sidebar including options & categories -->
  <div class="sidebar__content">
    <!-- Looping over all the available categories -->
    {% for category in props["categories"] %}
    <!-- Rendering the template for each of those categories -->
    {{sidebarCategory(category)}}
    <!-- Ending the for -->
    {% endfor %}
  </div>
</div>
{%- endmacro %}

<!-- Template for the sidebar logo -->
{% macro sidebarLogo(props) -%}
<div class="sidebar__logo">
  <a href="/dashboard" class="sidebar__logo__wrapper__link">
    <div class="sidebar__logo__wrapper">
      <img
        src="{{url_for('static', filename='images/logo/color.svg')}}"
        class="sidebar__logo__image"
        height="40"
      />
      <span class="sidebar__logo__separator">|</span>
      <span class="sidebar__logo__brand">Weather</span>
    </div>
  </a>
</div>
{%- endmacro %}

<!-- Template for the sidebar category -->
{% macro sidebarCategory(props) -%}
<div class="sidebar__category">
  <div class="sidebar__category__header">{{props.displayName}}</div>
  <div class="sidebar__category__content">
    {% for option in props["options"] %} {{sidebarOption(option)}} {% endfor %}
  </div>
</div>
{%- endmacro %}

<!-- Template for the sidebar option -->
{%macro sidebarOption(props) -%}
<a class="sidebar__option__wrapper__link" href="{{props.url}}">
  <div class="sidebar__option {{'sidebar__option--active' if props.active}}">
    <span class="sidebar__option__icon material-icons-outlined">{{props.icon}}</span>
    <span class="sidebar__option__content">{{props.displayName}}</span>
  </div>
</a>
{%- endmacro %}