<template>
  <section>
    <article class="media" v-for="i in media" :key="i">
      <figure class="media-left">
        <p class="image is-64x64">
          <b-skeleton circle width="64px" height="64px"></b-skeleton>
        </p>
      </figure>
      <div class="media-content">
        <div class="content">
          <p>
            <b-skeleton active></b-skeleton>
            <b-skeleton height="80px"></b-skeleton>
          </p>
        </div>
        <nav class="level is-mobile">
          <div class="level-left">
            <a class="level-item">
                            <span class="icon is-small">
                                <b-skeleton></b-skeleton>
                            </span>
            </a>
          </div>
        </nav>
      </div>
    </article>
  </section>
</template>

<script>
	export default {name: 'ThreadDisplayPlaceholder',
    data() {
      return {
        media: 8
      }
    }
  }
</script>

<style lang='scss' scoped>
	@import '../assets/scss/variables.scss';

	.thread_display_placeholder {
		display: flex;
		padding: 0.75rem;
		background-color: #fff;
		border-radius: 0.25rem;
		margin-bottom: 1rem;
		transition: background-color 0.2s;
		position: relative;
		border: thin solid $color__gray--darker;

		@at-root #{&}__bar {
			@include flash;

			background-color: $color__gray--primary;
			height: 0.85rem;
			width: 75%;
			margin-bottom: 0.35rem;

			@at-root #{&}--5 { width: 5%; }
			@at-root #{&}--15 { width: 15%; }
			@at-root #{&}--20 { width: 20%; }
			@at-root #{&}--33 { width: 33%; }
			@at-root #{&}--58 { width: 58%; }
		}

		@at-root #{&}__icon {
			@include flash;

			margin-right: 0.75rem;
			margin-left: 0.25rem;
			border-radius: 100%;
			background-color: $color__gray--darkest;
			height: 2.5rem;
			width: 2.5rem;
			font-size: 2rem;
			line-height: 2.25rem;
		}


		@at-root #{&}__header {
			display: flex;
			justify-content: space-between;
		}

		@at-root #{&}__replies_bar {
			display: flex;
			justify-content: space-between;
		}

		@at-root #{&}__content {
			margin-top: 0.5rem;
			word-break: break-all;
		}
	}
</style>
