<template>
  <div>
    <div class="hub hub-search" id="basicSearchId">
      <div class="heading-container" style="line-height: 70px; margin-bottom: 0px;">
        <div class="navButtonsContainer">
          <h1 class="title-main" :style="fontColor">
            <span class="counter-container">
              <span class="count">{{ data.results ? data.results.length : 0 }}</span> &nbsp;{{ $t('front_extern.vehicles')}}
            </span>
          </h1>
          <template v-if="false">
            <span class="divider advanced-mobile"> &nbsp;|&nbsp; </span><span class="customize-search-container advanced-mobile"><a href="javascript:;" class="top-link customize-search advancedSearchButton"><span style="color: #000000!important">Erweiterte Suche</span></a></span><span class="divider advanced-mobile"> &nbsp;|&nbsp; </span><span class="customize-search-container"><a href="javascript:;" class="top-link customize-search resetButton"><span style="color: #000000!important">Zurücksetzen</span></a></span>
          </template>
        </div>
        <div v-if="false" class="printButtonsContainer"><a href="#" class="printLayerButton" data-modal-id="modalPrint" style="color: #000000!important">Drucken</a><span class="divider"> &nbsp;|&nbsp; </span><a href="#" class="pdfLayerButton" data-modal-id="modalPdf" style="color: #000000!important">Download PDF</a></div>
      </div>AA
      <form v-if="true" id="hcifilterform" action="" method="GET">
        <div class="expander">
          <div class="expander-content" style="background-color: #fff!important;">
            <div class="filter-form">
              <div class="layout--group">
                <div class="layout--four-fifth full-w-mobile">
                  <div class="layout--group">
                    <div class="layout--one-fourth">
                      <div class="part-line connected"><label for="Make" class="line-label"><span class="label-text" style="color: #d63e2d!important;">Marke</span></label>
                        <div class="ghost-select-container">
                          <div class="ghost-select"><span class="label">Alle</span>
                            <div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;"></span></div>
                            <select class="ghost" data-param="make" id="markenID" name="Make">
                              <option value="0">Alle</option>
                              <option value="APRILIA">APRILIA</option>
                              <option value="BMW">BMW</option>
                              <option value="KAWASAKI">KAWASAKI</option>
                              <option value="SUZUKI">SUZUKI</option>
                              <option value="YAMAHA">YAMAHA</option>
                            </select>
                          </div>
                          <div class="connector"></div>
                        </div>
                      </div>
                    </div>
                    <div class="layout--one-fourth">
                      <div class="part-line"><label for="Model" class="line-label"><span class="label-text" style="color: #d63e2d!important;">Modell</span></label>
                        <div class="ghost-select-container" id="divModel">
                          <div class="ghost-select"><span class="label">&nbsp;</span>
                            <div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;"></span></div><select class="ghost" data-param="model" id="modelID" name="Model">
                              <option value="0">Alle</option>
                            </select>
                          </div>
                          <div class="connector"></div>
                        </div>
                      </div>
                    </div>
                    <div class="layout--one-fourth">
                      <div class="part-line"><label for="PriceTo" class="line-label"><span class="label-text" style="color: #d63e2d!important;">Preis <span class="label-hint">bis</span></span></label>
                        <div class="ghost-select-container">
                          <div class="ghost-select"><span class="label">Alle</span>
                            <div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;"></span></div><select class="ghost" data-param="priceto" id="PriceTo" name="PriceTo">
                              <option value="" selected="selected">Alle</option>
                              <option value="1000">CHF 1000</option>
                              <option value="2000">CHF 2'000</option>
                              <option value="3000">CHF 3'000</option>
                              <option value="4000">CHF 4'000</option>
                              <option value="5000">CHF 5'000</option>
                              <option value="7500">CHF 7'500</option>
                              <option value="10000">CHF 10'000</option>
                              <option value="12500">CHF 12'500</option>
                              <option value="15000">CHF 15'000</option>
                              <option value="17500">CHF 17'500</option>
                              <option value="20000">CHF 20'000</option>
                              <option value="22500">CHF 22'500</option>
                              <option value="25000">CHF 25'000</option>
                              <option value="30000">CHF 30'000</option>
                              <option value="35000">CHF 35'000</option>
                              <option value="40000">CHF 40'000</option>
                              <option value="45000">CHF 45'000</option>
                              <option value="50000">CHF 50'000</option>
                              <option value="60000">CHF 60'000</option>
                              <option value="70000">CHF 70'000</option>
                              <option value="80000">CHF 80'000</option>
                              <option value="90000">CHF 90'000</option>
                              <option value="100000">CHF 100'000</option>
                              <option value="150000">CHF 150'000</option>
                              <option value="200000">CHF 200'000</option>
                              <option value="300000">CHF 300'000</option>
                            </select>
                          </div>
                          <div class="connector"></div>
                        </div>
                      </div>
                    </div>
                    <div class="layout--one-fourth">
                      <div class="part-line"><label for="KmTo" class="line-label"><span class="label-text" style="color: #d63e2d!important;">km <span class="label-hint">bis</span></span></label>
                        <div class="ghost-select-container">
                          <div class="ghost-select"><span class="label">Alle</span>
                            <div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;">&nbsp;</span></div><select class="ghost" data-param="kmto" id="KmTo" name="KmTo">
                              <option value="">Alle</option>
                              <option value="1000">1'000 Km</option>
                              <option value="5000">5'000 Km</option>
                              <option value="7500">7'500 Km</option>
                              <option value="10000">10'000 Km</option>
                              <option value="25000">25'000 Km</option>
                              <option value="50000">50'000 Km</option>
                              <option value="60000">60'000 Km</option>
                              <option value="70000">70'000 Km</option>
                              <option value="80000">80'000 Km</option>
                              <option value="90000">90'000 Km</option>
                              <option value="100000">100'000 Km</option>
                              <option value="125000">125'000 Km</option>
                              <option value="150000">150'000 Km</option>
                              <option value="175000">175'000 Km</option>
                              <option value="200000">200'000 Km</option>
                            </select>
                          </div>
                          <div class="connector"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="layout--one-fifth showOnMobile">
                  <div class="part-line"><label for="Sort" class="line-label"><span class="label-text" style="color: #d63e2d!important;">Sortieren nach:</span></label>
                    <div class="ghost-select-container">
                      <div class="ghost-select sort"><span class="label sortLabelText">Bitte auswählen</span>
                        <div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;">&nbsp;</span></div><select class="ghost" data-param="sort" id="Sort" name="Sort">
                          <option value="" selected="selected">Bitte auswählen</option>
                          <option value="price_asc">Preis (tiefster zuerst)</option>
                          <option value="price_desc">Preis (höchster zuerst)</option>
                          <option value="km_asc">Km (tiefste zuerst)</option>
                          <option value="km_desc">Km (höchste zuerst)</option>
                          <option value="year_asc">Jahrgang (älteste zuerst)</option>
                          <option value="year_desc">Jahrgang (neuste zuerst)</option>
                          <option value="makemodel_asc">Marke/Modell (A-Z)</option>
                          <option value="makemodel_desc">Marke/Modell (Z-A)</option>
                        </select>
                      </div>
                      <div class="connector"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="layout--group">
                <div class="layout--one-fourth onMobile">
                  <div class="part-line"><label for="Sort" class="line-label"><span class="label-text" style="color: #d63e2d!important;">Sortieren nach:</span></label>
                    <div class="ghost-select-container">
                      <div class="ghost-select sort"><span class="label sortLabelText">Bitte auswählen</span>
                        <div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;">&nbsp;</span></div><select class="ghost" data-param="sort" id="Sort" name="Sort">
                          <option value="">Bitte auswählen</option>
                          <option value="price_asc">Preis (tiefster zuerst)</option>
                          <option value="price_desc">Preis (höchster zuerst)</option>
                          <option value="km_asc">Km (tiefste zuerst)</option>
                          <option value="km_desc">Km (höchste zuerst)</option>
                          <option value="year_asc">Jahrgang (älteste zuerst)</option>
                          <option value="year_desc">Jahrgang (neuste zuerst)</option>
                          <option value="makemodel_asc">Marke/Modell (A-Z)</option>
                          <option value="makemodel_desc">Marke/Modell (Z-A)</option>
                        </select>
                      </div>
                      <div class="connector"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="hub hub-filter-list">
      <div class="resultListContainer" style="margin: 0 auto;"></div>
      <div id="listContainerToPrint" class="object-list-container search-result-container">
        <p class="printHeader"><b>Keller Motos AG</b> Industriestrasse 17 5301 Siggenthal-Station Telefon: 056 281 13 13 </p>
        <product-grid
          :data="data.results"
          :lang="lang"
          :settings="settings"
          @detailClick="$emit('detailClick', $event)"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { emit } from 'process';
import ProductGrid from './ProductGrid.vue'

export default {
  props: ['data', 'lang', 'settings'],
  components: {
    'product-grid': ProductGrid,
  },
  data() {
  },
  computed: {
    // titleColor: function() {
    //   return this.settings.titleColor ? 'color: #' + this.settings.titleColor + ' !important' : '';
    // },
    // bgColor: function() {
    //   return this.settings.divBGColor ? 'color: #' + this.settings.divBGColor + ' !important' : '11';
    // },
    fgColor: function() {
      // console.log(this.settings)
      console.log('this.settings.divBGColor', this.settings.divBGColor)
      return this.settings.divBGColor ? 'color: #' + this.settings.divBGColor + ' !important' : '11';
    },
    // bgColor: function() {
    //   // console.log('this.settings.divBGColor', this.settings.divBGColor)
    //   return this.settings.divBGColor ? 'background-color: #' + this.settings.divBGColor + ' !important' : '11';
    // },
    fontColor: function() {
      return this.settings.fontColor ? 'color: #' + this.settings.fontColor + ' !important' : '';
    },
  },
}
</script>

