<template >
  <div >
    <h2 class='title is-2' >Tags de data.elements[0]</h2 >
    <section
      v-if='data && data.elements'
      class='edit' >
      elements: {{ data.elements.length }}
      <b-field label='Nom' >
        <b-input
          v-model='data.elements[0].tags.name'
          icon='pencil'
          placeholder='le nom de votre commerce'
        ></b-input >
      </b-field >
      <b-field label='Site web' >
        <b-input
          v-model='data.elements[0].tags.website'
          icon='planet'
          placeholder='www.monsite.com'
        ></b-input >
      </b-field >
      <b-field label='email officiel' >
        <b-input
          v-model='data.elements[0].tags.mail'
          icon='enveloppe'
          placeholder='contact@monsite.com'
        ></b-input >
      </b-field >
      <b-field label='Tel' >
        <b-input
          v-model='data.elements[0].tags.phone'
          icon='planet'
          placeholder='012345'
          type='tel'
        ></b-input >
      </b-field >
      <b-field label='Description de votre activité' >
        <b-input
          v-model='data.elements[0].tags.description'
          icon='planet'
          placeholder='description de votre activité'
          type='tel'
        ></b-input >
      </b-field >
      <b-field >
        <b-switch v-model='data.elements[0].tags.takeaway' >
          Vente à emporter
        </b-switch >
        <b-switch v-model="data.elements[0].tags['parking:velo']" >
          Parking vélo
        </b-switch >
        <b-switch v-model="data.elements[0].tags['webaccess']" >
          Accès Internet
        </b-switch >
        <b-switch v-model="data.elements[0].tags['elecborne']" >
          borne de recharge électrique sur parking
        </b-switch >
        <b-switch v-model="data.elements[0].tags['access:public']" >
          Accès autorisé au public
        </b-switch >
      </b-field >

      <h2 class='title is-2' >Horaires d'ouverture</h2 >
      <div class='padded' >
        {{ data.elements[0].tags.opening_hours }}
      </div >

      <button class='btn button has-background-success' >Enregistrer</button >
    </section >
    <section class='comparaison' >
      <h2 >Comparaison des tags</h2 >
      <table >
        <thead >
        <tr >
          <td >API OSM</td >
          <td >API addok</td >
        </tr >
        </thead >
        <tbody >
        <tr >
          <td >
            <!--                <div v-for="(value, name) in data[0].properties.tags" :key="name">-->
            <!--                  <div class="columns">-->
            <!--                    <div class="column">-->
            <!--                      <strong> {{ name }} </strong>-->
            <!--                    </div>-->
            <!--                    <div class="column">-->
            <!--                      {{ value }}-->
            <!--                    </div>-->
            <!--                  </div>-->
            <!--                </div>-->
          </td >
          <td v-if='fetchedData.osm_data && fetchedData.osm_data.elements' >
            <div
              v-for='(value, name) in fetchedData.osm_data.elements[0].tags'
              :key='name'
            >
              <div class='columns' >
                <div class='column' >
                  <strong > {{ name }}</strong >
                </div >
                <div class='column' >{{ value }}</div >
              </div >
            </div >
          </td >
        </tr >
        </tbody >
      </table >
    </section >
    <pre v-if='data' >
      data:
      {{ data }}
    </pre >
  </div >
</template >
