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

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