<template>
  <Card dis-hover>
    <p slot="title"><a href="#" v-if="hasUser" @click.prevent="ignore('band', event.band.name)"><Icon type="ios-eye-off" title="Dölj"></Icon>&nbsp;</a>{{event.band.name}}</p>
    <Row>
      <Col :xs="24" :sm="12"><strong>Datum:</strong> {{event.date}}</Col>
      <Col :xs="24" :sm="12" v-if="event.time"><strong>Tid:</strong> {{event.time}}</Col>
    </Row>
    <Row>
      <Col :xs="24" :sm="12" :md="6"><strong>Var:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('danceHall', event.danceHall.name)"><Icon type="ios-eye-off" title="Dölj"></Icon>&nbsp;</a>{{event.danceHall.name}}</Col>
      <Col :xs="24" :sm="12" :md="6"><strong>Ort:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('city', event.danceHall.city)"><Icon type="ios-eye-off" title="Dölj"></Icon>&nbsp;</a>{{event.danceHall.city}}</Col>
      <Col :xs="24" :sm="12" :md="6"><strong>Kommun:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('municipality', event.danceHall.municipality)"><Icon type="ios-eye-off" title="Dölj"></Icon>&nbsp;</a>{{event.danceHall.municipality}}</Col>
      <Col :xs="24" :sm="12" :md="6"><strong>Län:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('state', event.danceHall.state)"><Icon type="ios-eye-off" title="Dölj"></Icon>&nbsp;</a>{{event.danceHall.state}}</Col>
    </Row>
  </Card>
</template>

<script>
  export default {
    props: {
      event: {
        type: Object,
        required: true
      },
      hasUser: {
        type: Boolean,
        required: true
      },
      ignore: {
        type: Function,
        required: true
      }
    }
  };
</script>
