{% extends "cms/mypage.html" %}
{% load cms_tags %}
{% load djangocms_alias_tags %}
{% load menu_tags %}
{% load static %}
{% block body %}

<style>
  #govplan-searchresult-275111 .card-body {
    padding: 1rem !important;
  }
</style>

<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
    <symbol id="check2" viewBox="0 0 16 16">
        <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
    </symbol>
    <symbol id="circle-half" viewBox="0 0 16 16">
        <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" />
    </symbol>
    <symbol id="moon-stars-fill" viewBox="0 0 16 16">
        <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
        />
        <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
        />
    </symbol>
    <symbol id="sun-fill" viewBox="0 0 16 16">
        <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
        />
    </symbol>
</svg>

<div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
    <button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
        <svg class="bi my-1 theme-icon-active" width="1em" height="1em">
            <use href="#circle-half"></use>
        </svg>
        <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
    </button>
    <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
        <li>
            <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
                <svg class="bi me-2 opacity-50" width="1em" height="1em">
                    <use href="#sun-fill"></use>
                </svg>
                Light
                <svg class="bi ms-auto d-none" width="1em" height="1em">
                    <use href="#check2"></use>
                </svg>
            </button>
        </li>
        <li>
            <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
                <svg class="bi me-2 opacity-50" width="1em" height="1em">
                    <use href="#moon-stars-fill"></use>
                </svg>
                Dark
                <svg class="bi ms-auto d-none" width="1em" height="1em">
                    <use href="#check2"></use>
                </svg>
            </button>
        </li>
        <li>
            <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
                <svg class="bi me-2 opacity-50" width="1em" height="1em">
                    <use href="#circle-half"></use>
                </svg>
                Auto
                <svg class="bi ms-auto d-none" width="1em" height="1em">
                    <use href="#check2"></use>
                </svg>
            </button>
        </li>
    </ul>
</div>

<div class="col-lg-10 mx-auto p-4 py-md-5">
    <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
        <a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none text-reset">
            <img src="{% static 'froide_govplan/images/logo.svg' %}" class="bi me-2" height="50">
            <span class="fs-4">VerwaltungsTracker</span>
        </a>
        <div style="margin-left: auto; max-width: 350px;" class="search">
            <form method="get" action="/search/" class="ajaxified" data-container="#govplan-searchresult-275111" data-modalcontainer="#govplan-searchmodal-275111">
              <div class="input-group">
                <input type="text" name="q" class="form-control" aria-label="Suchbegriff" placeholder="Suchbegriff">
                <select name="status" class="form-select" style="display: none;">
                  <option value="">Status filtern</option>
                  
                    <option value="not_started">nicht begonnen</option>
                  
                    <option value="started">begonnen</option>
                  
                    <option value="partially_implemented">teilweise umgesetzt</option>
                  
                    <option value="implemented">umgesetzt</option>
                  
                    <option value="deferred">zurückgestellt</option>
                  
                </select>
                <button class="btn btn-outline-secondary" type="submit">
                  Suchen
                </button>
              </div>
              
                <input type="hidden" name="government" value="1"/>
              
            </form>
            
            <div class="modal fade" id="govplan-searchmodal-275111">
              <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">Suchergebnisse</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen">
                    </button>
                  </div>
                  <div class="modal-body">
                    <div id="govplan-searchresult-275111"></div>
                  </div>
                </div>
              </div>
            </div>
        
        </div>
    </header>

    <main>

        {% if request.path == '/' %}
        <div class="py-5 teaser">
            
            <h1 class="text-body-emphasis">Wir bringen Licht ins Dunkel der Behörden</h1>
            <p class="fs-5 col-md-8">
                Mit unserem Verwaltungstracker können Sie die Arbeit der Stadtverwaltung Karlsruhe live verfolgen: Welche Vorhaben werden umgesetzt? Wo wird gebremst? Wie sieht der Stand in einzelnen Themenbereichen aus?
            </p>

            <div class="row justify-content-center mb-5">
                <div class="col col-lg-12">
                    <div class="box-card border-yellow md:shadow-yellow bg-body mw-100 col-md-8">
                        <div class="mt-4">
                            {% include "froide_govplan/plugins/progress_row.html" with object_list=plans %}
                            <p class="small text-body-secondary mt-3 no-hyphens">
                                <span class="text-nowrap me-1"><i class="fa fa-circle" style="color: #d4d8da;"></i>&nbsp;nicht begonnen</span>
                                <span class="text-nowrap me-1"><i class="fa fa-circle text-primary"></i>&nbsp;begonnen</span>
                                <span class="text-nowrap me-1"><i class="fa fa-circle text-warning"></i>&nbsp;teilweise umgesetzt</span>
                                <span class="text-nowrap me-1"><i class="fa fa-circle text-success"></i>&nbsp;umgesetzt</span>
                                <span class="text-nowrap me-1"><i class="fa fa-circle text-danger"></i>&nbsp;verschoben</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        {% endif %}
        
        {% static_alias "govplan_header" %}

        {% block app_body %}
          {% placeholder "content" %}
        {% endblock app_body %}

        {% if request.path == '/' %}

          <div class="row featurette mt-5">
            <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/magnify_pyramid.webp' %}" height="250px">
            </div>
            <div class="col-md-7 order-2 order-md-1">
                <h2 class="featurette-heading fw-normal lh-1">Mitmachen!</h2>
                <p class="lead">
                    Gemeinsam schaffen wir mehr Transparenz in der Arbeit der Stadtverwaltung Karlsruhe.
                </p>
                <p>
                    Auf den einzelnen Vorhaben-Seiten kann jede:r Hinweise und Änderungen einreichen. Wir prüfen diese zeitnah und stellen sie anschließend online. Außerdem lässt sich der aktuelle Stand jedes Vorhabens per Klick direkt bei der zuständigen Stelle der Stadt anfragen – vielleicht läuft hinter den Kulissen schon etwas, das öffentlich bekannt werden sollte.
                </p>
                <p>
                    Ein Vorhaben fehlt? Oder Sie möchten mit Ihrer Initiative oder Organisation die Patenschaft für eines oder mehrere Vorhaben übernehmen? Sehr gern! Schreiben Sie uns einfach eine Mail:
                </p>
                <p>
                    <a class="btn btn-primary" href="mailto:onny@project-insanity.org?subject=Verwaltungstracker">
                        <i class="fa fa-envelope">&nbsp;</i>
                        <span class="small">onny@project-insanity.org</span>
                    </a>
                </p>
            </div>
        </div>

        {% endif %}

        {% static_alias "govplan_footer" %}

    </main>

    <footer class="pt-5 text-body-secondary border-top mt-5">

        <div class="row g-4">
            <div class="col-12 col-md-6 col-lg-8">
                <a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none text-reset mb-3">
                    <img src="{% static 'froide_govplan/images/logo.svg' %}" class="bi me-2" height="35">
                    <span class="fs-6">VerwaltungsTracker</span>
                </a>
                <p style="max-width: 300px;">
                    Folge uns auf Mastodon für neue Entwicklungen in Verwaltungsvorhaben:
                </p>
                <div class="mt-3 mb-4">
                    <a href="https://social.project-insanity.org/@verwaltungstracker" target="_blank"
                        <button type="button" class="btn btn-secondary">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mastodon me-1" viewBox="0 0 16 16">
                                <path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a4 4 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522q0-1.288.66-2.046c.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764q.662.757.661 2.046z"></path>
                            </svg>
                            <span class="small" style="vertical-align: text-bottom;">@verwaltungstracker</span>
                        </button>
                    </a>
                </div>
            </div>
            <div class="col-6 col-md-3 col-lg-2">
                <h5>Über uns</h5>
                <ul class="list-unstyled text-small">
                    <li><a class="link-secondary text-decoration-none" href="{% url 'govplan:about' %}">Über uns</a></li>
                    <li><a class="link-secondary text-decoration-none" href="{% url 'govplan:team' %}">Team</a></li>
                    <li><a class="link-secondary text-decoration-none" href="{% url 'govplan:support' %}">Unterstützen</a></li>
                </ul>
            </div>
            <div class="col-6 col-md-3 col-lg-2">
                <h5>Rechtliches</h5>
                <ul class="list-unstyled text-small">
                    <li><a class="link-secondary text-decoration-none" href="{% url 'govplan:privacy' %}">Datenchutzerklärung</a></li>
                    <li><a class="link-secondary text-decoration-none" href="{% url 'govplan:impress' %}">Impressum</a></li>
                    <li><a class="link-secondary text-decoration-none" href="{% url 'govplan:contact' %}">Kontakt</a></li>
                </ul>
            </div>
        </div>

    </footer>
</div>

{% endblock body %}