<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 :style="color('titleColor')" class="counter-container">
              <span class="count">{{ $store.state.list ? $store.state.pagination.numberOfReslults : 0 }}</span> &nbsp;{{ $t('front_externMP.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>
      <div>
        <Pagination
            v-if="$store.state.pagination.numberOfReslults"
            :total-pages="Math.ceil($store.state.pagination.numberOfReslults/$store.state.settings.perPage)"
            :per-page="$store.state.settings.perPage"
            :current-page="$store.state.pagination.page"
            @pagechanged="$emit('reloadData')"

          />        
      </div>
      <form v-if="true" style="padding: 10px;" id="hcifilterform" action="" method="GET" :style="[bckgrColor('searchBgColor')]">
        <div id="expander">
          <div class="expander-content">
            <div class="filter-form">
              <div class="layout--group">
                <div class="layout--four-fifth full-w-mobile">
                  <div class="layout--group">
                    <div v-if="$store.state.settings.type == 1 || $store.state.settings.type == 3" class="layout--one-fourth">
                      <div class="part-line connected1">
                        <label for="Make" class="line-label">
                          <span class="label-text" :style="color('titleColor')">{{ $t('front_externMP.label_marke') }}</span>
                        </label>
                        <div class="ghost-select-container">
                          <div class="ghost-select">
                            <brand-selector
                              @reloadData="$emit('reloadData')"
                            />
                          </div>
                          <div class="connector"></div>
                        </div>
                      </div>
                    </div>
                    <div v-if="$store.state.categories.length > 0" class="layout--one-fourth">
                      <div class="part-line">
                        <label for="Model" class="line-label">
                          <span class="label-text" :style="color('titleColor')">{{ $t('front_externMP.label_category') }}</span>
                        </label>
                        <div class="ghost-select-container" id="divModel">
                          <div class="ghost-select">
                            <category-selector
                              @reloadData="$emit('reloadData')"
                            />
                          </div>
                          <div class="connector"></div>
                        </div>
                      </div>
                    </div>
                    <div v-if="$store.state.settings.type == 2 || $store.state.settings.type == 3" class="layout--one-fourth">
                      <div class="part-line">
                        <label for="PriceTo" class="line-label">
                          <span class="label-text" :style="color('titleColor')">{{ $t('front_externMP.label_untergrp') }}</span>
                        </label>
                        <div class="ghost-select-container">
                          <div class="ghost-select">
                            <untergrp-selector
                              @reloadData="$emit('reloadData')"
                            />
                          </div>
                          <div class="connector"></div>
                        </div>
                      </div>
                    </div>
                    <div v-if="$store.state.settings.type == 2" class="layout--one-fourth">
                      <div class="part-line">
                        <label for="PriceTo" class="line-label">
                          <span class="label-text" :style="color('titleColor')">{{ $t('front_externMP.label_mbrand') }}</span>
                        </label>
                        <div class="ghost-select-container">
                          <div class="ghost-select">
                            <mbrand-selector
                              @reloadData="$emit('reloadData')"
                            />
                          </div>
                          <div class="connector"></div>
                        </div>
                      </div>
                    </div>
                    <div v-if="$store.state.settings.type == 1 || $store.state.settings.type == 3" class="layout--one-fourth">
                      <div class="part-line">
                        <label for="PriceTo" class="line-label">
                          <span class="label-text" :style="color('titleColor')">{{ $t('front_externMP.label_artnum') }}</span>
                        </label>
                        <div class="ghost-select-container">
                          <div class="ghost-select">
                            <artnum-selector
                              @reloadData="$emit('reloadData')"
                            />
                          </div>
                          <div class="connector"></div>
                        </div>
                      </div>
                    </div>
                    <div v-if="$store.state.settings.type == 1" class="layout--one-fourth">
                      <div class="part-line">
                        <label for="PriceTo" class="line-label">
                          <span class="label-text" :style="color('titleColor')">{{ $t('front_externMP.label_arttitle') }}</span>
                        </label>
                        <div class="ghost-select-container">
                          <div class="ghost-select">
                            <arttitle-selector
                              @reloadData="$emit('reloadData')"
                            />
                          </div>
                          <div class="connector"></div>
                        </div>
                      </div>
                    </div>
                    <div v-if="$store.state.locations.length > 1" class="layout--one-fourth">
                      <div class="part-line connected">
                        <label for="KmTo" class="line-label">
                          <span class="label-text" :style="color('titleColor')">{{ $t('front_externMP.standort') }}</span>
                        </label>
                        <div class="ghost-select-container">
                          <div class="ghost-select">
                            <standort-selector
                              @reloadData="$emit('reloadData')"
                            />
                          </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('titleColor')">{{ $t('front_externMP.label_sortby') }}</span>
                    </label>
                    <div class="ghost-select-container">
                      <div class="ghost-select sort">
                        <sort-selector
                          @reloadData="$emit('reloadData')"
                        />
                      </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="bckgrColor">
                          <span class="icon" style="border-top-color: #FFFFFF!important;"></span>
                        </div>
                        <sort-selector
                          @reloadData="$emit('reloadData')"
                        />
                      </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
          @detailClick="$emit('detailClick', $event)"
        />
      </div>
    </div>
  </div>
</template>
<script>
import ProductGrid from './ProductGrid.vue'

import SelectorBrand from './SelectorBrand.vue'
import SelectorCategory from './SelectorCategory.vue'
import SelectorUntergrp from './SelectorUntergrp.vue'
import SelectorMbrand from './SelectorMbrand.vue'
import SelectorArtNum from './SelectorArtNum.vue'
import SelectorArtTitle from './SelectorArtTitle.vue'
import SelectorSort from './SelectorSort.vue'
import SelectorStandort from './SelectorStandort.vue'
import Pagination from './Pagination.vue'

export default {
  // :data="list"
  // :lang="settings.lang"
  // :settings="settings"
  // props: ['data', 'lang', 'settings'],

  components: {
    'product-grid': ProductGrid,
    'brand-selector': SelectorBrand,
    'category-selector': SelectorCategory,
    'untergrp-selector': SelectorUntergrp,
    'mbrand-selector': SelectorMbrand,
    'artnum-selector': SelectorArtNum,
    'arttitle-selector': SelectorArtTitle,
    'sort-selector': SelectorSort,
    'standort-selector': SelectorStandort,
    'Pagination': Pagination,
  },
  data() {
  },
  computed: {
  },
}
</script>
<style scoped>
    .hub.hub-search, #expander {
      background-color: v-bind('#' + $store.state.settings.divBgColor + "!important") ;
    }
    .hub.hub-filter-list{
      background-color: v-bind('#' + $store.state.settings.divBgColor + "!important") ;
    }

</style>
