<template>
  <div class="row">
    <div class="col" v-if="filterOptions.faction.length > 1">
      <label>Faction</label>
      <select
        class="form-control pull-left"
        v-model="value.faction"
        style="width:180px"
      >
        <option
          v-for="(f, index) in filterOptions.faction"
          :key="f"
          :selected="index === 0"
          >{{ f }}
        </option>
      </select>
    </div>
    <div class="col" v-if="filterOptions.power === true">
      <label>Power</label>
      <input
        type="number"
        class="form-control"
        placeholder="Min power"
        v-model.number="value.minPower"
        style="width:180px"
      />
      <input
        type="number"
        class="form-control"
        placeholder="Max power"
        v-model.number="value.maxPower"
        style="width:180px"
      />
    </div>
    <div class="col" v-if="filterOptions.cost === true">
      <label>Cost</label>
      <input
        type="number"
        class="form-control"
        placeholder="Min cost"
        v-model.number="value.minCost"
        style="width:180px"
      />
      <input
        type="number"
        class="form-control"
        placeholder="Max cost"
        v-model.number="value.maxCost"
        style="width:180px"
      />
    </div>
    <div class="col" v-if="filterOptions.draft.length > 1">
      <label>Draft mode</label>
      <select
        class="form-control pull-left"
        v-model="value.draft"
        style="width:180px"
      >
        <option
          v-for="(d, index) in filterOptions.draft"
          :key="d"
          :selected="index === 0"
          >{{ d }}
        </option>
      </select>
    </div>
    <div class="col" v-if="filterOptions.popularity.length > 1">
      <label>Popularity rule</label>
      <select
        class="form-control pull-left"
        v-model="value.popularity"
        style="width:180px"
      >
        <option
          v-for="(p, index) in filterOptions.popularity"
          :key="p"
          :selected="index === 0"
          >{{ p }}
        </option>
      </select>
    </div>
    <div class="col" v-if="filterOptions.byName === true">
      <label>Name</label>

      <div class="form-check">
        <input
          type="checkbox"
          class="form-check-input"
          v-model="value.byName"
        />
        <label class="form-check-label">Filter by name</label>
      </div>
      <input
        type="text"
        class="form-control pull-left"
        v-model="value.name"
        style="width:180px"
        :disabled="!value.byName"
      />
    </div>
    <hr />
  </div>
</template>

<script>
export default {
  props: ['filterOptions', 'value']
};
</script>

<style scoped>
div {
  color: antiquewhite;
}
</style>
