{% extends "base_generic.html" %}
{% load tags %}
{% load static %}
{% load compress %}
{% load crispy_forms_tags %}

{% block script %}
{% compress js inline %}
<script>
$(document).ready(function(){

    $("#how").fadeOut(0);

    $("#how").click(function(){

        $("#how").fadeOut(200);
    });

    $(".show-all").click(function(){
        $(".card").show();
        $("button").removeClass("mark");
        $("#how").fadeOut(40);

    });


    $(".btn-toggle").click (function(elem){

       let toggler = this.getAttribute("data-toggler");
       $(".card").show();
       $("button").removeClass("mark");

       $(".card").not("." + toggler).hide();
       $("button").filter( "." + toggler ).addClass("mark");
       // $("button ." + toggler ).addClass("mark");

       if($(".card").filter(":visible").length < 1){
         $("#how").fadeIn(200)
       } else{
         $("#how").fadeOut(10)
       }

    });

});

</script>
{% endcompress %}

<style media="screen">
  .card-columns .mab-card {
    width: 97%;
    height: 95%;
    display: block;
    margin-top: 4px;
    max-width: 100%;
    border-color: #469CA8;
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto;
  }

  .mab-card-body {
    padding: 10px 10px 10px 10px;
  }

  .mab-card img {
    border-radius: 20px 20px 0 0;
  }

  .mab-product-title {

    padding: .15em .75em .15em 0.75em;
    border-style: solid;
    border-width: 0px;
    border-color: #469CA8;
    color: #469CA8;
    background-color: #FFFD;
    border-radius: 150px;

    font-size: 1.5em;
    font-weight: bold;
    font-family: NeuzeitGro-Reg;
    text-align: center;

    position: absolute;
    bottom: 16px;
    left: 16px;

  }


  .mab-product-button-text {
    color: #EA4814;
    font-size: initial;
    font-weight: bold;
    text-align: center;
    top: 25%;
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    position: inherit;
  }


  .mab-product-button {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: #EDBBA8;
    border: 0px solid #EA4814;
    border-radius: 50%;
    width: 5.2em;
    height: 5.2em;
    text-align: center;
    transform: rotate(15deg);
  }


  .mab-product-vote {

    position: absolute;
    top: 8px;
    right: 16px;
    color: white;
    font-size: large
  }

  .mab-card-text {
    color: black;
    margin-top: 0px;
    line-height: 2.25em;
  }

  .card-columns .mab-card-highlight {
    box-shadow: 0 4px 8px 0 rgba(70, 156, 168, 0.2), 0 6px 20px 0 rgba(70, 156, 168, 0.19);
    margin-bottom: 40px;
  }

  .card-columns .mab-card-container-highlight {
    margin-bottom: 40px;
  }


  .tag-line {
    line-height: 2.25em;
  }

  .tag-container {}

  .mab-search-bar {
    padding-top: 4px;
  }


  /* ------------------------------------------------------------------------------- */

  .scene {
    width: 200px;
    height: 260px;
    border: 1px solid #CCC;
    margin: 40px 0;
    perspective: 600px;
  }

  .flipcard {
    position: relative;
    transform-style: preserve-3d;
    /* transform-origin: center right; */
    transition: transform 1s;
  }

  .flipcard.is-flipped {
    /* transform: translateX(-100%) rotateY(-180deg);  */
    transform: rotateY(180deg);
  }

  .mab-card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    /* overflow: auto; */
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .mab-card-face--front {
    position: relative;
    background-color: #FFF;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

  }

  .card-columns .mab-card-face--front .mab-card {
    background-color: #fafafa;
  }

  .mab-card-face--front .mab-card,
  .mab-card-face--back .mab-card,
  .mab-card-face--front .mab-card div,
  .mab-card-face--back .mab-card div,
  .mab-card-face--front .mab-card a,
  .mab-card-face--back .mab-card a {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

  }

  .toogle-overflow {

    overflow: auto;
  }

  .mab-card-face--back {
    background: #FFF;
    transform: rotateY(180deg);
    top: 0;
    position: absolute;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: none;
    border-radius: 0rem;
  }
</style>

{% endblock %}






{% block content %}

<div class="container-fluid tag-container">





<nav class="navbar-expand-sm tag" style="margin-left: 0px">


  <button class="navbar-toggler border-thin mybtn rounded-0 tag navbar-expand-sm " type="button" data-toggle="collapse" data-target="#tags"  aria-expanded="false" aria-label="Toggle tags" style="font-size: 15px">
    <span class="mybtn"></span> Alle Tags anzeigen ⋁
  </button>

  <div class="row border-dark collapse navbar-collapse tag-line" id="tags">
    <div class="container-fluid">
      <p>Filtere die Projekte, indem du auf einen der folgenden Tags klickst:</p>
      <button  class="show-all border-thin mybtn " style="margin-bottom: 2px; ">#Alle anzeigen</button>

      {% for elem in frei_list %}
      <button id='{{elem.0}}' data-toggler='{{elem.0}}' class="border-thin mybtn btn-toggle elem.0" style="margin-bottom: 2px; ">#{{elem.1}}</button>
      {% endfor %}

      {% for key, value in raum_agebote_dict.items %}
      <button class="border-thin mybtn btn-toggle {{key}}" data-toggler='{{key}}' style="margin-bottom: 2px; ">#{{value}}</button>
      {% endfor %}

      {% for key, value in ort_dict.items %}
      <button class="border-thin mybtn btn-toggle {{key}}" data-toggler='{{key}}' style="margin-bottom: 2px; ">#{{value}}</button>
      {% endfor %}

      {% for elem in altneu_list %}
      <button class="border-thin mybtn btn-toggle {{elem.0}}" data-toggler='{{elem.0}}' style="margin-bottom: 2px; ">#{{elem.1}}</button>
      {% endfor %}

      <button class="border-thin mybtn btn-toggle begleitet_true" data-toggler='begleitet_true' style="margin-bottom: 2px; " style="">#Begleitet von realitylab</button>
      <button class="border-thin mybtn btn-toggle urbanem_true" data-toggler='urbanem_true' style="margin-bottom: 2px; " style="">#Urbane Mischung</button>
      <button class="border-thin mybtn " style="margin-bottom: 2px; ">{% include "marktplatz/modal-sa.html" %}</button>

    </div>
  </div>

  <div class="row border-dark " id="search_bar">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-6">
          <form method="post" action="{% url 'generic-search-products' type=type %}" >
            {% csrf_token %}
            <!-- Left here in case we need to debug -->
            {% if signup_errors %}
            <div class='invalid-feedback' style="display: none;">{{ signup_errors }}</div>
            {% endif %}
            {% if contact_errors %}
            <div class='invalid-feedback' style="display: none;">{{ contact_errors }}</div>
            {% endif %}

            <!-- end of debug -->

            {%  crispy textSearchForm  %}

          </form>

        </div>
        <div class="col-sm-6">

        </div>
      </div>
    </div>
  </div>

</nav>

</div>

<hr class="division-color" >

<div id="how" style="margin-top: 5px;text-align: center;vertical-align: middle; max-height: 40px;" class="container-fluid">

  <p style="color: black"> There are no Products matching your selection, as you have selected multiple tags.
    Click <button class="show-all border-thin mybtn" style="margin-bottom: 2px; margin-top: 15px">#Alle anzeigen</button> to deselect all tags.
  </p>
</div>



<!-- Start Cards -->

<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *  -->

<div class="card-columns" style="margin-top: 7px; orphans: 1;">

  {{main_card|safe}}

  <hr class="division-color" style="margin: 35px 0px 35px 0px">

  {% for product in object_list %}

    <!-- rounded-0 border-0 -->
    <div
      class="card  {{product.ort}} {{product.status}} {{product.frei}} {{product.altneu}} {% for key in product.raumangebot %}{{key}} {% endfor %} {% if product.mitmachen %}begleitet_true{% endif %} {% if product.urbanem %}urbanem_true{% endif %} {% if product.frei == 'JAJA' %} mab-card-container-highlight {% endif %}   ">
      <div id="product_{{product.pk}}_card" class="flipcard">
        <div class="mab-card-face mab-card-face--front toogle-overflow">
          <!--  -->
          <div class="mab-card {{product.ort}} {{product.status}} {{product.frei}} {{product.altneu}}   {% if product.frei == 'JAJA' %} mab-card-highlight {% endif %}" style="">
            <a href="{% url 'product-detail-type' type=product.type pk=product.pk  %}">
              <div style="position: relative;text-align: center;">
                <img class="{% for category in product.category.all %} {{category.short_name}} {% endfor %} card-img-top" data-otherclass="rounded-0"
                  src="{{product.media_set.first.image_norm.url}}" alt="image" loading="lazy">
                <div class="mab-product-title" style=""><span>{{product.name }}</span></div>

                {% if product.frei == 'JAJA' %} <div class="mab-product-button" style="">
                  <div class="mab-product-button-text">
                    Wohnung Frei!
                  </div>
                </div>
                {% endif %}

              </div>
            </a>
            <div class="card-body mab-card-body " style="">

              <p class="mab-card-text card-text" style="">
                {% if request.user_agent.browser.family != 'Safari'  %}
                <button id='product_{{product.pk}}_flipper' onclick="" class="border-thin mybtn flipper" data-flip-card="product_{{product.pk}}_card" style=""><i class="fas fa-sync-alt"></i> Steckbrief</button>
                {% endif %}
                <!-- <button id='product_{{product.pk}}_teilen' onclick="location.href = '{% url 'projekt-card-embed' pk=product.pk %}'" class="border-thin mybtn" style=""><i class="fas fa-share"></i> Teilen</button> -->
                <button id='product_{{product.pk}}_{{product.frei}}' data-toggler='{{product.frei}}' class="border-thin mybtn btn-toggle {{product.frei}}" style="">#{{product.get_frei_display}}</button>
                <button id='product_{{product.pk}}_{{product.status}}' data-toggler='{{product.status}}' class="border-thin mybtn btn-toggle {{product.status}}" style="">#{{product.get_status_display}}</button>
                <button id='product_{{product.pk}}_{{product.ort}}' data-toggler='{{product.ort}}' class="border-thin mybtn btn-toggle {{product.ort}}" style="">#{{product.get_ort_display}}</button>
                <button id='product_{{product.pk}}_{{product.altneu}}' data-toggler='{{product.altneu}}' class="border-thin mybtn btn-toggle {{product.altneu}}" style="">#{{product.get_altneu_display}}</button>

                {% for key in product.raumangebot %}
                <button class="border-thin mybtn btn-toggle {{key}}" data-toggler='{{key}}' style="margin-bottom: 2px; ">#{{ product.raumangebot.choices|get_item:key}}</button>
                {% endfor %}

                {% for key, value in product.raumangebot.field.choices %}
                <button class="border-thin mybtn btn-toggle {{key}}" data-toggler='{{key}}' style="margin-bottom: 2px; ">#{{value}}</button>
                {% endfor %}

                {% if product.mitmachen %}
                <button id='product_{{product.pk}}_realitylab_{{product.mitmachen}}' data-toggler='begleitet_true' class="border-thin mybtn btn-toggle begleitet_true" style="">#Begleitet von RealityLab</button>
                {% endif %}

                {% if product.urbanem %}
                <button id='product_{{product.pk}}_urbanem_{{product.urbanem}}' data-toggler='urbanem_true' class="border-thin mybtn btn-toggle urbanem_true" style="">#Urbane Mischung</button>
                {% endif %}


                <!-- <button  class="show-all border-thin mybtn " style="margin-bottom: 2px; ">#Alle anzeigen</button> -->
                <!-- <span id="ShareButton" class="cursor-pointer" > Teilen</span>  -->
              </p>
            </div>
          </div>
        </div>

        <!-- BACKFACE BACKFACE BACKFACE BACKFACE BACKFACE BACKFACE BACKFACE -->

        {% if request.user_agent.browser.family != 'Safari'  %}

        <div class="mab-card-face mab-card-face--back">
          <div class="mab-card  {% if product.frei == 'JAJA' %} {% endif %}">

            <div class="container flipper-wrapper" data-flip-card="product_{{product.pk}}_card">
              <div class="row">
                <div class="col-sm-12">
                  <br>
                  <div class="" style="">
                    <h3> {{ product.name }}</h3>
                  </div>
                  <button id='product_{{product.pk}}_flipper_back' onclick="" class="border-thin mybtn " data-flip-card="product_{{product.pk}}_card" style=""><i class="fas fa-sync-alt"></i> Steckbrief</button>
                  <div class="" style=""><span>{{ product.beschreibung | safe }}</span></div>
                  <div class="" style=""><strong>Wohnungen:</strong> <span>{{ product.awohnungen }}</span></div>
                  <div class="" style=""><span>{% if product.gemeinschaftr  %}<strong>{% field_name product 'gemeinschaftr' %}:</strong> {{  product.gemeinschaftr  }}{% endif %}</span></div>
                  <div class="" style=""><span>{% if product.kgemeinschaftr  %}<strong>{% field_name product 'kgemeinschaftr' %}:</strong> {{  product.kgemeinschaftr  }}{% endif %}</span></div>
                  <div class="" style=""><span>{% if product.claim  %}<strong>{% field_name product 'claim' %}:</strong> {{  product.claim  }}{% endif %}</span></div>
                  <span></span>

                </div>
              </div>
            </div>

            <a href="{% url 'product-detail-type' type=product.type pk=product.pk  %}">
              <div style="position: relative;text-align: center;">

                &nbsp;

              </div>
            </a>
            <div class="card-body mab-card-body " style="">
              &nbsp;
            </div>

          </div>
        </div> <!-- BACKFACE -->

        {% endif %}

      </div>
    </div>

  {% endfor %}

  {{sponsor_cards|safe}}


{% if request.user_agent.browser.family != 'Safari'  %}
  {% compress js inline %}
    <script>

      $(".flipper").click (function(elem){

         let toggler = this.getAttribute("data-flip-card");
         $("#" + toggler ).toggleClass('is-flipped');
         $("#" + toggler + " .mab-card-face" ).toggleClass('toogle-overflow');

      });

      $(".flipper-wrapper").click (function(elem){

         let toggler = this.getAttribute("data-flip-card");
         $("#" + toggler ).toggleClass('is-flipped');
         $("#" + toggler + " .mab-card-face" ).toggleClass('toogle-overflow');

      });

    </script>
  {% endcompress %}
{% endif %}

</div>

<!-- End Cards -->

<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *  -->



{% endblock %}