<template>
  <div class="browser">
    <div class="view" v-for="(address, idx) in addresses" :key="address">
      <header :class="{ disabled: addresses.length === 1 }">
        <sl-icon-button
          class="this-button"
          name="bookmark"
          @click="visit(idx)"
        />
        <sl-icon-button
          class="close-button"
          name="x-circle"
          @click="close(idx)"
        />
      </header>
      <Inspect :address="address" />
    </div>
  </div>
</template>

<script lang="ts">
import Inspect from "@/views/Inspect.vue";
import { defineComponent, PropType } from "vue";

export default defineComponent({
  name: "Browse",
  components: {
    Inspect,
  },
  props: {
    addresses: {
      type: Array as PropType<String[]>,
      required: true,
    },
  },
  data: () => {
    return {};
  },
  setup(props) {},
  methods: {
    visit(idx: number) {
      this.$router.push({
        params: { addresses: [this.$route.params.addresses[idx]] },
      });
    },
    close(idx: number) {
      const addresses = [...this.$route.params.addresses];
      addresses.splice(idx, 1);
      this.$router.push({
        params: { addresses },
      });
    },
  },
});
</script>

<style scoped lang="scss">
.browser {
  display: flex;
  min-height: 100%;
  overflow-x: auto;
}

.view {
  min-width: 30em;
  max-width: 30em;

  border-left: 1px solid var(--foreground);
  border-right: 1px solid var(--foreground);

  margin: 1rem 0;
  padding: 0 1rem;

  header {
    position: relative;
    margin: 0;
    min-height: 1em;

    .this-button {
      position: absolute;
      left: 50%;
      translate: transformX(-50%);
    }

    .close-button {
      position: absolute;
      right: 0;
    }

    &.disabled {
      opacity: 0.5;
      pointer-events: none;
    }
  }
}
</style>
