<script>

import { restaurantStore } from '@/PiniaStores/restaurantStore.js'

export default {
  data() {
    return {
      locale:{},

    }
  },
  mounted() {
    fetch(`http://localhost:8080/api/locals/${restaurantStore().id}`)
      .then(res => res.json())
      .then(data => this.locale = data)
      .catch(err => console.log(err));
  },

}
/*console.log(restaurantStore().id)*/

</script>

<template>
  <div id="container" class="border my-3 p-2">
    <h3>{{locale.id}}</h3>
    <h5>{{locale.name}}</h5>
    <p>{{locale.description}}</p>
    <p>{{locale.address}}</p>
    <p>{{locale.workingHours}}</p>
    <div v-for="service in locale.services" :key="service">
      <p>{{service}}</p>
    </div>
    <p>{{locale.averageRating}}</p>
    <div v-for="event in locale.events" :key="event">
      <p>{{event}}</p>
    </div>
    <div v-for="photo in locale.localPhotos" :key="photo">
      <p>{{photo}}</p>
    </div>
    <p>{{locale.menuPhoto}}</p>
    <p>{{locale.menuLink}}</p>
    <p>{{locale.contact}}</p>
    <p>{{locale.logo}}</p>

  </div></template>

<style scoped>

</style>
