<template>
    <div class="book-item Icon--container Icon--{{active}}">
        <a href="{{slug}}">
            <img v-bind:src="path" transition="fadein" class="img-responsive"/>
        </a>
        <template v-if="name">
          <div class="info">
            <h4>{{name}}</h4>
          </div>
        </template>
        <template v-if="remove">
          <div class="delete">
            <a href="#">
              <i class="fa fa-trash"></i>
            </a>
          </div>
        </template>
        <template v-if="edit">
          <div class="edit">
            <a href="#" class="cta purple">Edit</a>
          </div>
        </template>
        <template v-if="view">
          <div class="view">
            <a href="#" class="cta purple">View</a>
          </div>
        </template>
  </div>
</template>

<script>
export default
{

  props:{
    info: {},
    remove: {},
    edit: {},
    view: {},
    active: {default:'show'},
    path: {default:''},
    name: {default:'Icon name'},
    slug: {default:'#'},
  },
  data: function() {
    return {}
  },
  methods:{},
  events: {},
  ready:function(e)
  {

  },
  created:function(e)
  {

  }

};
</script>

<style>
.Icon--container {
  display: inline-block;
  justify-content: space-around;
  position:relative;
  overflow:auto;
}

.book-item {
  background: #FFFFFF;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.2);
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.2);
  margin-bottom: 2em;
}

.book-item .info {
  padding-left : 1em;
  padding-bottom:1em;
}

.book-item .info h4 {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  font-size: 16px;
  font-weight: 300;
  color: #2c2c2c;
}

.book-item .delete a {
  color: #2c2c2c;
}

.book-item .edit a, .book-item .view a {
  line-height: 45px;
}

</style>