<script type="text/x-template" id="grid">
<div>
  <table v-if="data.length">
    <thead>
      <tr>
        <th v-for="key in columns">
          {{key}}
  </th>
  </tr>
  </thead>
    <tbody>
      <tr v-for="entry in data">
        <td v-for="key in columns">
          {{entry[key]}}
  </td>
        <td><router-link :to="{name: `${prefix}_update`, params: {id: entry.id}}">edit</router-link></td>
        <td><button @click="$store.dispatch('REMOVE', {state: prefix, table: table, })">delete</button></td>
  </tr>
  </tbody>
  </table>
  <em v-else>no data</em>
  </div>

</script>
<script type="text/x-template" id="autocomplete">
<div class="autocomplete" style="width:300px;">
  <input :value="my_prop" @input="send($event.target.value)" :placeholder="state"  @blur="onBlur=true" @focus="onFocus = true;onBlur = false;" @keyDown="keyDown"  type="text" name="autoomplete" >
  <div class="autocomplete-items">
    <div :class="currentFocus == index ? 'autocomplete-active' : ''" v-for="(i, index) in arr" v-if= "my_prop && onFocus && i[text].substr(0, my_prop.length).toUpperCase() == my_prop.toUpperCase()" @click="send(i[text]);$emit('response', i);">
      <strong>{{i[text].substr(0, my_prop.length)}}</strong>{{i[text].substr(my_prop.length)}}
  </div>
  </div>
  </div>
</script>
<script type="text/x-template" id="dashboard">
<div>
  dashboard
  </div>
</script>
<script type="text/x-template" id="address_index">
<div>
  <router-view/>
  </div>
</script>
<script type="text/x-template" id="address_view">
<div>

  <router-link :to="{name: 'address_create'}">Create address</router-link>
  <grid
        store="getters"
        prefix="address"
        table="addresses"
        :columns="$store.getters['address/columns']">
  </grid>
  </div>
</script>
<script type="text/x-template" id="address_operation">
<div>
  <input placeholder="details" type="text" name="details" v-model="$store.getters['address/address'].details">
  <button @click="submit">{{`${$route.params.id ? 'Update' : 'Create'}`}} Address</button>
  </div>
</script>

<script type="text/x-template" id="ethnic_origin_index">
<div>
  <router-view/>
  </div>
</script>
<script type="text/x-template" id="ethnic_origin_view">
<div>

  <router-link :to="{name: 'ethnic_origin_create'}">Create Ethnic Origin</router-link>
  <grid
        store="getters"
        prefix="ethnic_origin"
        table="ethnic_origins"
        :columns="$store.getters['ethnic_origin/columns']">
  </grid>
  </div>
</script>
<script type="text/x-template" id="ethnic_origin_operation">
<div>
  <input placeholder="description" type="text" name="details" v-model="$store.getters['ethnic_origin/ethnic_origin'].descriptions">
  <button @click="submit">{{`${$route.params.id ? 'Update' : 'Create'}`}} Ethnic Origin</button>
  </div>
</script>

<script type="text/x-template" id="skill_index">
<div>
  <router-view/>
  </div>
</script>
<script type="text/x-template" id="skill_view">
<div>

  <router-link :to="{name: 'skill_create'}">Create skill</router-link>
  <grid
        store="getters"
        prefix="skill"
        table="skills"
        :columns="$store.getters['skill/columns']">
  </grid>
  </div>
</script>
<script type="text/x-template" id="skill_operation">
<div>
  <input type="text" name="details" v-model="$store.getters['skill/skill'].descriptions">
  <button @click="submit">{{`${$route.params.id ? 'Update' : 'Create'}`}} Skill</button>
  </div>
</script>

<script type="text/x-template" id="audition_outcome_index">
<div>
  <router-view/>
  </div>
</script>
<script type="text/x-template" id="audition_outcome_view">
<div>

  <router-link :to="{name: 'audition_outcome_create'}">Create Audition Outcome</router-link>
  <grid
        store="getters"
        prefix="audition_outcome"
        table="audition_outcomes"
        :columns="$store.getters['audition_outcome/columns']">
  </grid>
  </div>
</script>
<script type="text/x-template" id="audition_outcome_operation">
<div>
  <input type="text" name="details" v-model="$store.getters['audition_outcome/audition_outcome'].descriptions">
  <button @click="submit">{{`${$route.params.id ? 'Update' : 'Create'}`}} Audition Outcome</button>
  </div>
</script>

<script type="text/x-template" id="agent_index">
<div>
  <router-view/>
  </div>
</script>
<script type="text/x-template" id="agent_view">
<div>

  <router-link :to="{name: 'agent_create'}">Create agent</router-link>
  <grid
        store="getters"
        prefix="agent"
        table="agents"
        :columns="$store.getters['agent/columns']">
  </grid>
  </div>
</script>
<script type="text/x-template" id="agent_operation">
<div>
  <input placeholder="details" type="text" name="details" v-model="$store.getters['agent/agent'].details">
  <autocomplete v-model="autocomplete" state="address" text="details" id="id" :arr="$store.getters['address/addresses']" @response="response($event)" ></autocomplete>
  <button @click="submit">{{`${$route.params.id ? 'Update' : 'Create'}`}} Agent</button>
  </div>
</script>

<script type="text/x-template" id="client_index">
<div>
  <router-view/>
  </div>
</script>
<script type="text/x-template" id="client_view">
<div>
  <router-link :to="{name: 'client_create'}">Create client</router-link>
  <grid
        store="getters"
        prefix="client"
        table="clients"
        :columns="$store.getters['client/columns']">
  </grid>
  </div>
</script>
<script type="text/x-template" id="client_operation">
<div>
  <div><input placeholder="details" type="text" name="details" v-model="$store.getters['client/client'].details"></div>
  <div><input placeholder="client_name" type="text" name="client_name" v-model="$store.getters['client/client'].client_name"></div>
  <div><input placeholder="date_became_client" type="text" name="date_became_client" v-model="$store.getters['client/client'].date_became_client"></div>
  <div><input placeholder="date_of_last_contact" type="text" name="date_of_last_contact" v-model="$store.getters['client/client'].date_of_last_contact"></div>
  <div><input placeholder="contact_first_name" type="text" name="contact_first_name" v-model="$store.getters['client/client'].contact_first_name"></div>
  <div><input placeholder="contact_last_name" type="text" name="contact_last_name" v-model="$store.getters['client/client'].contact_last_name"></div>

  <div><autocomplete v-model="autocomplete" state="address" text="details" id="id" :arr="$store.getters['address/addresses']" @response="response($event)" ></autocomplete></div>
  <button @click="submit">{{`${$route.params.id ? 'Update' : 'Create'}`}} Client</button>
  </div>
</script>

<script type="text/x-template" id="talent_agency_index">
<router-view></router-view>
</script>
<script type="text/x-template" id="talent_agency_view">
<div>
  <router-link :to="{name: 'talent_agency_create'}">Create Talent agency</router-link>
  <grid
        store="getters"
        prefix="talent_agency"
        table="talent_agencies"
        :columns="$store.getters['talent_agency/columns']">
  </grid>
  </div>
</script>
<script type="text/x-template" id="talent_agency_operation">
<div>
  <div><input placeholder="details" type="text" name="details" v-model="$store.getters[`talent_agency/talent_agency`].details"></div>
  <div><autocomplete v-model="autocomplete" state="address" text="details" id="id" :arr="$store.getters['address/addresses']" @response="response($event)" ></autocomplete></div>
  <button @click="submit">{{`${$route.params.id ? 'Update' : 'Create'}`}} Talent Agency</button>
  </div>
</script>

<script type="text/x-template" id="audition_index">
<router-view></router-view>
</script>
<script type="text/x-template" id="audition_view">
<div>
  <router-link :to="{name: 'audition_create'}">Create Audition</router-link>
  <grid
        store="getters"
        prefix="audition"
        table="auditions"
        :columns="$store.getters['audition/columns']">
  </grid>
  </div>
</script>
<script type="text/x-template" id="audition_operation">
<div>
  <div><input placeholder="details" type="text" name="details" v-model="$store.getters[`audition/audition`].details"></div>
  <div>
   <select name="audition_outcome_code" id="audition_outcome_code" v-model="$store.getters[`audition/audition`].audition_outcome_code">
     <option v-for="audition_outcome_code in $store.getters['audition_outcome/audition_outcomes']" :value="audition_outcome_code.id">{{audition_outcome_code.descriptions}}</option>
  </select>
  </div>
  <div>
   <select name="client_id" id="client_id" v-model="$store.getters[`audition/audition`].client_id">
     <option v-for="client in $store.getters['client/clients']" :value="client.id">{{client.details}}</option>
  </select>
  </div>
  <div>
   <select name="talent_agency_id" id="talent_agency_id" v-model="$store.getters[`audition/audition`].talent_agency_id">
     <option v-for="talent_agency in $store.getters['talent_agency/talent_agencies']" :value="talent_agency.id">{{talent_agency.details}}</option>
  </select>
  </div>
  <div>
    <input type="date" v-model="$store.getters[`audition/audition`].audition_date_time" placeholder="audition date">
  </div>
  <div>
    <input type="text" v-model="$store.getters[`audition/audition`].audition_location" placeholder="audition location">
  </div>
  <div>
    <input type="text" v-model="$store.getters[`audition/audition`].contact_name" placeholder="contact name">
  </div>
  <div><autocomplete v-model="autocomplete" state="address" text="details" id="id" :arr="$store.getters['address/addresses']" @response="response($event)" ></autocomplete></div>
  <button @click="submit">{{`${$route.params.id ? 'Update' : 'Create'}`}} Talent Agency</button>
  </div>
</script>

<script type="text/x-template" id="performer_index">
<router-view></router-view>
</script>
<script type="text/x-template" id="performer_view">
<div>
  <router-link :to="{name: 'performer_create'}">Create Performer</router-link>
  <grid
        store="getters"
        prefix="performer"
        table="performers"
        :columns="$store.getters['performer/columns']">
  </grid>
  </div>
</script>
<script type="text/x-template" id="performer_operation">
<div>
  <div><input placeholder="details" type="text" name="details" v-model="$store.getters[`performer/performer`].details"></div>
  <div>
   <select name="agent_id" id="agent_id" v-model="$store.getters[`performer/performer`].agent_id">
     <option v-for="agent_id in $store.getters['agent/agents']" :value="agent.id">{{agent.details}}</option>
  </select>
  </div>
  <div>
   <select name="ethnic_origin_id" id="ethnic_origin_id" v-model="$store.getters[`performer/performer`].ethnic_origin_id">
     <option v-for="ethnic_origin in $store.getters['ethnic_origin/ethnic_origins']" :value="ethnic_origin.id">{{ethnic_origin.details}}</option>
  </select>
  </div>
  <div>
   <select name="talent_agency_id" id="talent_agency_id" v-model="$store.getters[`performer/performer`].talent_agency_id">
     <option v-for="talent_agency in $store.getters['talent_agency/talent_agencies']" :value="talent_agency.id">{{talent_agency.details}}</option>
  </select>
  </div>
  <div><input type="text" v-model="$store.getters[`performer/performer`].stage_name" placeholder="stage_name"></div>
    <div><input type="text" v-model="$store.getters[`performer/performer`].first_name" placeholder="first_name"></div>
    <div><input type="text" v-model="$store.getters[`performer/performer`].last_name" placeholder="last_name"></div>
    <div><input type="text" v-model="$store.getters[`performer/performer`].date_of_birth" placeholder="date_of_birth"></div>
    <div><input type="text" v-model="$store.getters[`performer/performer`].gender_MUF" placeholder="gender_MUF"></div>
    <div><input type="text" v-model="$store.getters[`performer/performer`].profile" placeholder="profile"></div>
    <div><input type="text" v-model="$store.getters[`performer/performer`].details" placeholder="details"></div>
  <div>
  <div><autocomplete v-model="autocomplete" state="address" text="details" id="id" :arr="$store.getters['address/addresses']" @response="response($event)" ></autocomplete></div>
  <button @click="submit">{{`${$route.params.id ? 'Update' : 'Create'}`}} performer</button>
  </div>
</script>

<div id="app">
  <router-link v-for="(link,index) in $store.getters.links" :key="index"  :to="{name: link.to}">{{link.name}} | </router-link>
  <router-view/>
</div>