{% load thumbnail %}
{% load govplan %}
{% load static %}

<style>
  {% for section in sections %}
  {% if section.image %}
  #govsection-{{ section.pk }} .card-img-top {
    background-image: url('{% thumbnail section.image 600x300 crop subject_location=section.image.subject_location %}');
    background-size: cover;
    background-position: center;
    height: 185px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  #govsection-{{ section.pk }} .card-img-top::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4); /* Abdunkelung */
    z-index: 1;
  }
  {% endif %}
  {% endfor %}

  .card-title-overlay {
    z-index: 2;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    padding: 0 15px;
  }

  .card-body {
    padding: 0.3rem 1rem;
  }

    /* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
  letter-spacing: -.05rem;
}

/* rtl:end:remove */

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}
</style>


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

  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">

    {% for section in sections %}
    <div class="col">
      <a href="{{ section.get_absolute_url }}" class="text-decoration-none text-reset">
      <div class="card shadow-sm" id="govsection-{{ section.pk }}">
        <div class="card-img-top">
          <div class="card-title-overlay">
            {{ section.title }}
          </div>
        </div>
        <div class="card-body">
          <p class="card-text">
            {% if section.icon %}
            <div class="ms-auto">
              <div class="box-card-icon position-static text-bg-body">
                <i class="fa fa-{{ section.icon }}"></i>
              </div>
            </div>
            {% endif %}
            {% get_section_progress section %}
          </p>
        </div>
      </div>
      </a>
    </div>
    {% endfor %}

  </div>
</div>

<div class="py-5">

        <div class="row featurette">
            <div class="col-md-5  d-flex align-items-center justify-content-center order-1 order-md-2 mb-4">
              <img src="{% static 'froide_govplan/images/teaser_image_1.webp' %}" height="250px">
          </div>
            <div class="col-md-7 order-2 order-md-1 mb-4">
                <h2 class="featurette-heading fw-normal lh-1 mb-4">We’re watching you! <span class="text-body-secondary">Karlsruhe.</span></h2>
                <p class="lead">
                    Wir haben die Verwaltungsvorhaben der Stadt Karlsruhe genau unter die Lupe genommen und rund 60 überprüfbare Projekte identifiziert, die die Stadtverwaltung plant: Es geht um Klimaschutz und Digitalisierung, um Vorhaben im Bereich Wohnen und Mobilität, um moderne Verwaltungsprozesse und Maßnahmen zur Gleichstellung.
                </p>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
              <!-- Column 1 text -->
                <p>
                    Mit unserem Verwaltungstracker machen wir öffentlich, wie es um den Fortschritt dieser Projekte steht. Wir zeigen, welche Vorhaben derzeit bearbeitet werden, welche bereits umgesetzt sind und welche ins Stocken geraten sind. Vergleichbare Transparenzprojekte gibt es auf Landes- und Bundesebene – zum Beispiel von der Süddeutschen Zeitung oder Spiegel Online. Mit dem Verwaltungstracker übertragen wir dieses Prinzip auf die kommunale Ebene in Karlsruhe.
                </p>
            </div>
            <div class="col-md-6">
              <!-- Column 2 text -->
              <p>
                <b>
                    Partner:innen aus der Zivilgesellschaft
                </b>
                </p>
                <p>
                    Ergänzend bieten wir auch qualitative Einschätzungen zu einzelnen Vorhaben: Expert:innen aus zivilgesellschaftlichen Organisationen beobachten bestimmte Themenfelder, ordnen Entwicklungen ein und bewerten den Fortschritt.
                </p>
            </div>
          </div>

</div>