<template>
  <modal
    :hide-header="false"
    :small="true"
    class="snapshot-created">
    <div slot="header">
      <h1 class="snapshot-created__heading">Ein neuer Snapshot wurde erstellt</h1>
    </div>
    <div class="snapshot-created__content">
      <div class="snapshot-created__entry">
        <span class="snapshot-created__title">{{ snapshot.title }}</span>
        <span class="snapshot-created__meta">{{ created }} - {{ snapshot.creator }}</span>
      </div>
    </div>
    <div slot="footer">
      <a
        class="button button--primary"
        data-cy="show-all-snapshots-button"
        @click="toList">Alle Snapshots anzeigen</a>
      <a
        class="button"
        @click="close">Zurück zum Modul</a>
    </div>
  </modal>
</template>

<script>
  import Modal from '@/components/Modal';
  import {SNAPSHOT_LIST} from '@/router/module.names';
  import dateformat from '@/helpers/date-format';

  export default {
    components: {
      Modal,
    },

    data() {
      return {
        snapshotList: {
          name: SNAPSHOT_LIST,
        },
      };
    },

    computed: {
      snapshot() {
        return this.$modal.state.payload.snapshot;
      },
      created() {
        return dateformat(this.snapshot.created);
      }
    },

    methods: {
      toList() {
        this.$router.push(this.snapshotList);
        this.$modal.confirm();
      },
      close() {
        this.$modal.cancel();
      },
    },
  };
</script>

<style scoped lang="scss">
  @import '~styles/helpers';

  .snapshot-created {
    &__heading {
      @include modal-heading;
    }

    &__content {
      min-height: 200px;
    }

    &__entry {
      padding: $medium-spacing;
      background-color: $color-brand-light;
      display: flex;
      align-items: center;
    }

    &__title {
      @include heading-4;
      margin-right: $medium-spacing;
    }

    &__meta {
      @include small-text;
    }
  }
</style>
