<template>
  <Block :title="$_tr('title')" title-tag="h5" class="map-custom-block mb-xl">
    <Map
      :latitude="+location.latitude"
      :longitude="+location.longitude"
      :markers="
        location.latitude && location.longitude
          ? [
            {
              latitude: +location.latitude,
              longitude: +location.longitude,
              title: location.title,
              address: location.address
            }
          ]
          : []
      "
      @onMarkerClick="handleClick"
    />
  </Block>
</template>

<script>
import Block from '@inside-commons/components/lib/Block'
import Map from '@inside-maps/components/lib/Map'

export default {
  name: 'ProjectLocation',
  $_i18nRootPath: 'customs.PROJECTS.location',
  components: { Block, Map },
  props: {
    location: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleClick() {
      this.triggerModal(
        'map',
        'static',
        {
          item: this.location
        },
        {
          layout: 'right',
          transition: 'fadeInLeft',
          closeAll: true,
          useUrlParams: true
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.map-custom-block {
  .map-container {
    height: 350px;
  }
}
</style>
