{% macro month_header_bar(prev_url, next_url, title) -%}
  <section class="period-header"
           data-component="swipe-nav"
           data-prev-url="{{ prev_url }}"
           data-next-url="{{ next_url }}">
    <div class="period-header__nav" data-component="period-nav">
      <a class="icon-button"
         href="{{ prev_url }}"
         title="Vorheriger Monat"
         aria-label="Vorheriger Monat">
        <img class="dash-icon dash-icon-rotate-180" src="/static/icons/arrow.svg" alt="" />
      </a>
      <p class="period-header__title">{{ title }}</p>
      <a class="icon-button"
         href="{{ next_url }}"
         title="Nächster Monat"
         aria-label="Nächster Monat">
        <img class="dash-icon" src="/static/icons/arrow.svg" alt="" />
      </a>
    </div>
    <div class="period-header__actions">{{ caller() }}</div>
  </section>
{%- endmacro %}