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

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

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

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

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

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

    });


    {% for country in count_list %}

    {% if country %}
/*
    $("[id='{{country.code}}']").click(function(){
        $(".card").show();
        $("button").removeClass("mark");

        $(".card").not(".{{country.code}}").hide();
        $("[id='{{country.code}}']").addClass("mark");

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

    });
*/
    {% endif %}

    {% endfor %}

    {% for year in year_list %}
/*
    $("[id='{{year}}']").click(function(){
        $(".card").show();
        $("button").removeClass("mark");

        $(".card").not(".{{year}}").hide();
        $("[id='{{year}}']").addClass("mark");

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

    });
*/
    {% endfor %}



    {% for key, value in ort_dict.items %}
    /*
      $(".{{ key }}").click(function(){
         $(".card").show();
         $("button").removeClass("mark");

         $(".card").not(".{{ key }}").hide();
         $("button .{{ key }}").addClass("mark");

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

      });
      */

    {% endfor %}

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

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

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

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

    });


});






</script>


<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: 1px;
    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: large;
    font-weight: bold;
    text-align: left;
    /* background-color: rgba(0, 0, 0, 0); */
    /* text-shadow: 0 0 6px #444, 0 0 20px #888; */
    vertical-align: bottom;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    position: inherit;
  }

  .mab-product-button {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: #EDBBA8;
    border: 2px solid #EA4814;
    border-radius: 50%;
    width: 5em;
    height: 5em;
    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;

    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;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  }

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

  }

  .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;

  }



.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-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle tags" style="font-size: 15px">
    <span class="mybtn"></span> Show All Tags ⋁
  </button>



  <div class="row border-dark collapse navbar-collapse tag-line" id="tags">

    <div class="container-fluid">
      <button id='show' class="border-thin mybtn " style="margin-right: 2px;margin-bottom: 2px">#Show All</button>

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

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

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

      <button class="border-thin mybtn " style="margin-right: 2px;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 'search-products' %}" >
            {% 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 <nobr><button id='show' class="border-thin mybtn" style="margin-right: 2px;margin-top: 15px">#Show All</button></nobr> to deselect all tags.
  </p>
</div>



<!-- Start Cards -->

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

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

  {{main_card|safe}}

  {% for product in wohnprojekt_list %}

  <!-- rounded-0 border-0 -->
  <div class="card  {{product.ort}} {{product.status}} {{product.frei}} {{product.altneu}}   {% 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 ">
      <!--  -->
      <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' product.pk %}">
          <div style="position: relative;text-align: center;">
            <img class="{% if user.is_authenticated %}{% get_vote_class product user %} {% endif %} {% for category in product.category.all %} {{category.short_name}} {% endfor %} card-img-top" otherclass="rounded-0"
              src="{{product.media_set.first.image_norm.url}}" alt="image">
            <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">
                Platz Frei!
              </div>
            </div>
            {% endif %}

          </div>
        </a>
        <div class="card-body mab-card-body " style="">
          <!--<div class="border-0 d-flex justify-content">
        <p class="card-title" style="margin-bottom: 3px"><a href="{% url 'product-detail' product.pk %}"> {{product.header }} </a></p>

      </div>-->

          <p class="mab-card-text card-text" style="">

            <button id='product_{{product.pk}}_{{product.frei}}' toggler='{{product.frei}}' class="border-thin mybtn btn-toggle {{product.frei}}" style="">#{{product.get_frei_display}}</button>
            <button id='product_{{product.pk}}_{{product.status}}' toggler='{{product.status}}' class="border-thin mybtn btn-toggle {{product.status}}" style="">#{{product.get_status_display}}</button>
            <button id='product_{{product.pk}}_{{product.ort}}' toggler='{{product.ort}}' class="border-thin mybtn btn-toggle {{product.ort}}" style="">#{{product.get_ort_display}}</button>
            <button id='product_{{product.pk}}_{{product.altneu}}' toggler='{{product.altneu}}' class="border-thin mybtn btn-toggle {{product.altneu}}" style="">#{{product.get_altneu_display}}</button>
            <button id='product_{{product.pk}}_teilen' onclick="location.href = '{% url 'product-detail-card-embed' pk=product.pk %}'" class="border-thin mybtn" style="">#<i class="fas fa-share"></i> Teilen</button>
            <button id='product_{{product.pk}}_flipper' onclick="" class="border-thin mybtn flipper" flip-card="product_{{product.pk}}_card" style="">#<i class="fas fa-sync-alt"></i> Steckbrief</button>
            <!-- <span id="ShareButton" class="cursor-pointer" > Teilen</span>  -->
          </p>
        </div>
      </div>
    </div>

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


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

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

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


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

            &nbsp;

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




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

    {% endfor %}




  {{sponsor_cards|safe}}


<script>

/*
  var card = document.querySelector('.card');
  card.addEventListener( 'click', function() {
    card.classList.toggle('is-flipped');
  });
*/
/*
  cards = $(".flipcard");
  cards.on( 'click', function(e) {
    $(this).toggleClass('is-flipped');
  });
*/

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

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

  });

</script>

</div>

<!-- End Cards -->

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



{% endblock %}
