<template>
  <div class="bookmark-tile" @click="click">
    <font-awesome-icon v-if="!showFavIcon" icon="external-link-alt" size="2x"/>
    <img v-if="showFavIcon" :src="favicon" @error="faviconError"/>
      {{bookmark.bookmarkName}}
  </div>
</template>

<script>
export default {
  props: ["bookmark"],
  data() {
    return {
      showFavIcon: true,
    }
  },
  computed: {
    favicon() {
      return `${this.$rootUrl()}/api/icon_proxy?url=${encodeURIComponent(this.bookmark.url)}`;
    }
  },
  methods: {
    click() {
      this.$emit("clicked", this.bookmark);
    },
    faviconError() {
      this.showFavIcon = false;
    }
  },
};
</script>

<style scoped>
.bookmark-tile {
  padding: 5px 25px;
  border-radius: 5px;
  transition: all 0.2s;
  line-height: 20px;
  display: flex;
}

.bookmark-tile img, .bookmark-tile svg {
  margin-right: 20px;
  width: 20px;
  height: 20px;
}

.bookmark-tile, .bookmark-tile svg {
  cursor: pointer;
  font-size: 16px;
  color: #ccc;
}
.lightMode .bookmark-tile, .lightMode .bookmark-tile svg {
  color: #222;
 }

.bookmark-tile:hover, .bookmark-tile:hover svg {
  transition: all 0.2s;
  background: rgba(0,0,0,0.25);
  color: #fff;
}

.lightMode .bookmark-tile:hover, .lightMode .bookmark-tile:hover svg {
  background: rgba(255,255,255,0.25);
  color: #222;
}
</style>
