{% load markup %}

<style>
  .govplan-update .card-body div.tight-margin {
    flex-grow: 1;
    overflow: hidden; /* make sure content doesn’t spill */
  }

  .govplan-update .card-header h3 {
    min-height: 2.4em;
    display: flex;
    align-items: flex-end;
  }

  #myCarousel .card {
    height: 380px;
    display: flex;
    flex-direction: column;
  }

  #myCarousel .card-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Multiline ellipsis for content */
  #myCarousel .tight-margin {
    overflow: hidden;
  }

  #myCarousel .tight-margin p,
  #myCarousel .tight-margin div {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines to show */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #myCarousel .badge {
    font-weight: 400;
    font-size: 0.85rem;
  }
</style>

<!-- Update tiles on start page -->
{% if request.path == '/' %}

<div class="py-5 bg-body-tertiary">

  <div class="mb-4">
    <h1 class="text-body-emphasis">Aktuelles</h1>
    <p class="fs-5 col-md-8">
      Hier finden Sie aktuelle Artikel und Links zu Blogs zu den Fortschritten der Stadtverwaltung Karlsruhe.
    </p>
  </div>

  <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner w-100">
      
      {% for update in updates %}
      <div class="carousel-item {% if forloop.first %}active{% endif %}">
        <div class="card col-md-4">
          <a href="{{ update.get_absolute_url }}" class="text-body text-decoration-none">
            <div class="card-header p-4 tight-margin text-start">
              {% if show_context %}
                <h3 class="h5 mt-0 ellipsis">{{ update.plan }}</h3>
              {% else %}
                <h3 class="h4 mt-0 ellipsis">{{ update.title }}</h3>
              {% endif %}
              <div class="small">
                <time datetime="{{ update.timestamp|date:'c' }}">{{ update.timestamp|date:"DATE_FORMAT" }}</time>
                {% if update.user or update.organization %}
                <span>
                  von {{ update.user.get_full_name }}{% if update.user and update.organization %},{% endif %}
                  {{ update.organization.name }}
                </span>
                {% endif %}
              </div>
            </div>
          </a>
          <div class="card-body tight-margin text-start p-4 d-flex flex-column">

            {% if update.content or show_context %}
            <div class="tight-margin flex-grow-1">
              {% if show_context %}
                <h4 class="h5">{{ update.title }}</h4>
              {% endif %}
              {% with update.content|markdown as content %}
                {% if show_context %}
                  {{ content|truncatewords_html:15 }}
                {% else %}
                  {{ content }}
                {% endif %}
              {% endwith %}
            </div>
            {% endif %}

            {% if update.url or update.foirequest or show_context %}
            <div class="{% if update.content %}box-card-links{% else %}d-flex mt-auto{% endif %} mt-auto">
              {% if show_context %}
                <a href="{{ update.get_absolute_url }}" class="action-link">→ zum Vorhaben</a>
              {% else %}
                {% if update.url %}
                  <a href="{{ update.url }}" class="action-link me-3" target="_blank" rel="noopener">
                    → mehr auf {{ update.get_url_domain }} lesen…
                  </a>
                {% endif %}
                {% if update.foirequest %}
                  <a href="{{ update.foirequest.get_absolute_url }}" class="action-link">→ zur Anfrage</a>
                {% endif %}
              {% endif %}
            </div>
            {% endif %}

            {% if show_context %}
            <div class="d-md-flex mt-2 align-items-center mt-3">
              <ul class="list-unstyled d-flex m-0">
                {% for cat in update.plan.categories.all %}
                <li>
                  <span class="badge bg-secondary text-decoration-none me-2 mb-2">
                    #{{ cat.name }}
                  </span>
                </li>
                {% endfor %}
              </ul>
            </div>
            {% endif %}

          </div>
        </div>
      </div>
      {% endfor %}
    </div>

    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>

{% else %}

<div class="py-3" style="margin-top: 1rem; margin-bottom: -2rem;">
  <h1 class="text-body-emphasis">Aktuelles</h1>
  <p class="fs-5 col-md-8">
    Hier finden Sie aktuelle Artikel und Links zu Blogs zu den Fortschritten des Vorhabens.
  </p>
</div>

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 govplan-update">
  {% for update in updates %}
  <div class="col">
    <div class="card mb-4 rounded-3 shadow-sm">
      <a href="{{ update.get_absolute_url }}" class="text-body text-decoration-none">
      <div class="card-header p-4 tight-margin text-start">
        {% if show_context %}
          <span class="badge text-bg-light text-decoration-none me-2 mb-2">
            {{ update.plan.get_section }}
          </span>
        {% endif %}
        
        {% if show_context %}
          <h3 class="h5 mt-0">
            <span class="title-text ellipsis">
              {{ update.plan }}
            </span>
          </h3>
        {% else %}
          <h3 class="h4 mt-0">
            <span class="title-text ellipsis">
              {{ update.title }}
            </span>
          </h3>
        {% endif %}

        <div class="small">
          <time datetime="{{ update.timestamp|date:'c' }}">{{ update.timestamp|date:"DATE_FORMAT" }}</time>
  
          {% if update.user or update.organization %}
          <span>
            von {{ update.user.get_full_name }}{% if update.user and update.organization %},{% endif %}
            {{ update.organization.name }}
          </span>
          {% endif %}
        </div>

      </div>
      </a>
      <div class="card-body tight-margin text-start p-4">

        {% if update.content or show_context %}
        <div class="tight-margin">
          {% if show_context %}
            <h4 class="h5">{{ update.title }}</h4>
          {% endif %}
      
          {% with update.content|markdown as content %}
            {% if show_context %}
              {{ content|truncatewords_html:50 }}
            {% else %}
              {{ content }}
            {% endif %}
          {% endwith %}
        </div>
        {% endif %}
      
        {% if update.url or update.foirequest or show_context %}
        <div class="{% if update.content %}box-card-links{% else %}d-flex mt-auto{% endif %}">
          {% if show_context %}
            <a href="{{ update.get_absolute_url }}" class="action-link">→ zum Vorhaben</a>
          {% else %}
            {% if update.url %}
              <a href="{{ update.url }}" class="action-link me-3" target="_blank" rel="noopener">→ mehr auf {{ update.get_url_domain }} lesen…</a>
            {% endif %}
      
            {% if update.foirequest %}
              <a href="{{ update.foirequest.get_absolute_url }}" class="action-link">→ zur Anfrage</a>
            {% endif %}
          {% endif %}
        </div>
        {% endif %}

      </div>
    </div>
  </div>
  {% endfor %}

{% endif %}