{% load static %}
{% load st_extratags %}
<!-- Termine -->
     <div class="w3-content w3-container w3-padding-64" id="termine">

        <div class="w3-container w3-padding st-br">
          <h4>Termine</h4>
        </div>
        <ul class="w3-ul w3-hoverable w3-white">
	  {% for te in termine %}
	  <li class="w3-padding-16">
	    <a href="{% url 'termin' te.id %}" style="text-decoration: none;">
              <img src="{% static te.bild %}" alt="Image" class="w3-left w3-margin-right" style="width:50px">
	      <span class="w3-text-grey">{{ te.date|deutschesdatum }}{% if te.end_date %} bis {{te.end_date|deutschesdatum}}{% endif %}</span>
	      <br>
              <span class="w3-large">{{te.titel}}</span>
              <br>
              <span>{{ te.teaser }}</span>
	      {% if te.freieplaetze == 0 %}
	      &nbsp;&nbsp;<span class="w3-text-orange"><b>ausgebucht</b></span>
	      {% endif %}
	    </a>
	  </li>
	  {% empty %}
	  <li class="w3-padding-16">
            <img src="{% static 'img/lama_f.jpg' %}" alt="Image" class="w3-left w3-margin-right" style="width:50px">
            <span class="w3-large">Die neuen Termine für 2022 werden in Kürze bekannt gegeben.</span>
          </li>
	  {% endfor %}
        </ul>
      </div>