Vue.component('event-basic-info', {
  props: { 
    event: {
      type: Object,
    },
  },
  inject: ['_f','_get'],
  methods: {
    openMap(addressName) {
      window.open("https://www.google.com/maps/search/?api=1&query=" + encodeURI(addressName), ' ', 'width=800, height=800')
    },
  },
  template:
`<v-row no-gutters>
  <v-col>
    <table :class="'black--text '+($vuetify.breakpoint.mdAndUp?'subtitle-1':'subtitle-2')" style="border-spacing: 0 4px;">
      <tr class="mb-5">
        <th shrink class="text-no-wrap text-left pl-0 pr-3 font-weight-bold">{{$t('event.datetime')}}</th>
        <td>
          <span class="pr-2" style="display: inline-block;">{{event.start_date}} － {{event.end_date}}</span>
          <span class="pr-2" style="display: inline-block;" v-if="event.settings && event.settings.weekday && event.settings.weekday.length>0">({{$t('every_weekday')}}{{event.settings.weekday.split(',').sort((a,b)=>(b==0)?-1:(a-b)).map(w=>$t('weekday.'+w+'.abbr')).join(', ')}})</span>
          <span class="" style="display: inline-block;" v-if="!(event.settings && event.settings.hide_event_time)">{{event.start_time.substr(0,5)}} － {{event.end_time.substr(0,5)}}</span>
        </td>
      </tr>
      <tr class="mb-5">
        <th shrink class="text-no-wrap text-left pl-0 pr-3 font-weight-bold">{{$t('event.location')}}</th>
        <td xs12>
          <span style="display: inline-block;">{{_f(event.fields, 'venue')}}</span>
          <v-btn 
            small 
            text 
            class="px-2 primary--text text-none"
            @click="openMap(_f(event.fields, 'address'))"
          >
            <v-icon color="primary" small>mdi-map-marker-radius</v-icon>
            <span class="subtitle-1">{{_f(event.fields, 'address')}}</span>
        </td>
      </tr>
      <tr class="mb-5">
        <th shrink class=' text-no-wrap text-left pl-0 pr-3 font-weight-bold'>{{$t('event.organizer')}}</th>
        <td>
          <span class="">{{_f(event.organizer.fields,'title')}}</span>
        </td>
      </tr>
    </table>
  </v-col>
</v-row>`
});