{% extends 'base/module.twig' %}

{% block content %}
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <div class="content-box">
        <wireframe-home :colors="configurations" @update:color="updateColor"/>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="content-box">
        <base-card>
          <div v-show="Object.keys(selectedColor).length === 0" class="vertical-padding-small">
            <div
              v-for="(item, index) in colors"
              class="flex flex-row between-xs middle-xs text-medium text-dark padding-medium cursor-pointer hover:background-gray"
              @click="selectedColor = item"
              :key="item.group">
              <span class="text-medium text-dark text-bold">{item.group}</span>
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div v-show="Object.keys(selectedColor).length > 0">
            <div class="flex flex-row middle-xs bottom-border-gray padding-x-small">
              <base-button
                apperance="white"
                square
                @click.native="selectedColor = {}">
                <i class="fas fa-chevron-left"></i>
              </base-button>
              <span class="text-medium text-dark text-bold left-margin-small">{selectedColor.group}</span>
            </div>
            <div class="top-padding-large horizontal-padding-large" v-if="selectedColor === colors[0]">
              <div class="logo-colors">
                <img id="img_config_logo" src="{{ logo }}" alt="Logo">
              </div>
              <base-button class="flex top-margin-medium"
                           @click.native="detectColors()">
                {text_detect_colors}
              </base-button>
              <div class="color-pallet top-padding-medium">
                <span>Clique para escolher as cores do seu site.</span>
                <div class="row between-xs x-small-space-xs small-space-ms top-margin-small">
                  <div v-for="(item, index) in 8" class="col-xs-3 rel" @click="handleInputColorClick('color' + index, $event)">
                    <base-input
                      :key="index"
                      class="input-color-option"
                      type="color"
                      :name="'color' + index"
                      :id="'color' + index"
                      v-model="configurations['color' + index]">
                    </base-input>
                    <setted-color
                      v-if="configurations['setted_color' + index] !== ''"
                      v-bind:text="configurations['setted_color' + index]">
                    </setted-color>
                  </div>
                </div>
              </div>
            </div>
            <div class="padding-large">
              <base-input
                v-for="field in selectedColor.fields"
                :key="field.name"
                type="color"
                :name="field.name"
                :id="field.name"
                :label="field.label"
                v-model="configurations[field.name]">
              </base-input>
            </div>
            <div class="bottom-padding-medium container-fluid flex flex-row middle-xs" v-if="selectedColor === colors[0]">
              <base-button class="flex-1"
                @click.native="invertColors()">
                <i class="fas fa-exchange-alt fa-rotate-90"></i>
              </base-button>
              <base-button class="flex left-margin-medium"
                @click.native="applyColors()">
                {text_apply_colors}
              </base-button>
            </div>
          </div>
        </base-card>
      </div>
    </div>
  </div>
</div>
{% endblock %}