<ul class="blog-menu-list">
  {% for item in items %}
    <li class="blog-menu-item{% if item.has_children %} blog-menu-item-with-children{% endif %}">
      {% if item.href == '#' %}
        <span class="blog-menu-link">{{ item.title }}</span>
      {% else %}
        <a class="blog-menu-link" href="{{ item.href }}">{{ item.title }}</a>
      {% endif %}
      {% if item.has_children %}
        <div class="blog-menu-submenu">
          {% render 'partials/menu-items', items: item.children %}
        </div>
      {% endif %}
    </li>
  {% endfor %}

  {% if include_calendar %}
    <li class="blog-menu-item blog-menu-calendar">
      <button
        type="button"
        class="blog-menu-calendar-button"
        data-blog-calendar-toggle
        {% if calendar_initial_year %}data-blog-calendar-year="{{ calendar_initial_year }}"{% endif %}
        {% if calendar_initial_month %}data-blog-calendar-month="{{ calendar_initial_month }}"{% endif %}
        aria-label="{{ labels.calendar_open_label }}"
        title="{{ labels.calendar_open_label }}"
      >
        <svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" focusable="false">
          <rect x="3" y="5" width="18" height="16" rx="2" ry="2"></rect>
          <line x1="3" y1="9" x2="21" y2="9"></line>
          <line x1="8" y1="3" x2="8" y2="7"></line>
          <line x1="16" y1="3" x2="16" y2="7"></line>
        </svg>
      </button>

      <section
        id="blog-calendar"
        class="blog-calendar-panel"
        data-blog-calendar-panel
        data-i18n-loading="{{ labels.calendar_loading_label }}"
        data-i18n-error="{{ labels.calendar_error_label }}"
        hidden
      >
        <header class="blog-calendar-header">
          <strong>{{ labels.calendar_title_label }}</strong>
          <button
            type="button"
            class="blog-calendar-close"
            data-blog-calendar-close
            aria-label="{{ labels.calendar_close_label }}"
            title="{{ labels.calendar_close_label }}"
          >
            ×
          </button>
        </header>
        <div class="blog-calendar-content">
          <div data-blog-calendar-root></div>
          <p class="blog-calendar-status" data-blog-calendar-status>{{ labels.calendar_loading_label }}</p>
        </div>
      </section>
    </li>
  {% endif %}
</ul>
