{% load wagtail_daisIE_tags notifications %}
{% if audience_allowed and value.items %}
  <ul class="timeline {% if value.vertical %}timeline-vertical{% else %}timeline-horizontal{% endif %} {{ block_css|default:"" }}"{% if block_style %} style="{{ block_style }}"{% endif %}>
    {% for item in value.items %}
      <li>
        <hr />
        <div class="timeline-start">{% daisie_markup item.start %}</div>
        <div class="timeline-middle">{% if item.icon %}{% daisyui_icon item.icon %}{% else %}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>{% endif %}</div>
        <div class="timeline-end timeline-box">{% daisie_markup item.end %}</div>
        <hr />
      </li>
    {% endfor %}
  </ul>
{% endif %}