<commit_before><template>
  <div>

    <linky-nav>
      <a id="add-icon" @click='showAdd = true' class="icon">+</a>
      <a @click="refreshList" class="icon">🔄</a>
      <a id="settings-icon" @click='showSettings = true' class="icon">⚙</a>
      <a v-if="authenticated" @click='logout'>Logout</a>
      <router-link to="/login" v-else>Login</router-link>
    </linky-nav>

    <nav class="list-options">
      <div class="search-option-section">
        <a class="icon">🔍</a>
        <input class="search" id="search" placeholder="search" type="search" v-model="query">
      </div>
      <div class="list-archive-option-section">
        <!-- FIXME -->
        <router-link :class="{ inactive: parentName !== 'list' }" to="/list">List</router-link>
        <router-link :class="{ inactive: parentName !== 'archive' }" to="/archive">Archive</router-link>
      </div>
    </nav>

    <ul class="link-container">
      <slot></slot>
    </ul>

    <helpModal :show="showHelp" @close="showHelp = false"></helpModal>
    <showSettingsModal :show="showSettings" @closed="showSettings = false"></showSettingsModal>
    <addLinkModal :show="showAdd" @closed="showAdd = false"></addLinkModal>
  </div>
</template>

<script>

import linkyNav from './LinkyNav.vue'
import helpModal from './helpModal.vue'
import showSettingsModal from './showSettingsModal.vue'
import addLinkModal from './addLinkModal.vue'

import list_nav from '../nav.js'
list_nav()

export default {
  name: 'list-base',
  components: {
    linkyNav,
    addLinkModal,
    showSettingsModal,
    helpModal,
  },
  data () {
    return {
      query: '',
      showAdd: false,
      showSettings: false,
      showHelp: false
    }
  },
  props: {
    parentName: {
      type: String,
      required: true,
    }
  },
  mounted() {
    this.$store.dispatch('refreshLinks')
  },
  computed: {
    authenticated () {
      return this.$store.state.user.authenticated
    },
  },
  methods: {
    refreshList() {
      this.$store.dispatch('refreshLinks')
    },
    logout() {
      this.$store.dispatch('logout').then(this.$router.replace('/'))
    }
  }
}

</script>

<style lang='scss'>

$font-family: georgia, serif;
$base-font-size: 18px;

$text-gray: #444;
$max-width-main-content: 40em;

// background colors
$sepia: #f8f2e3;
$grayblack: #3c3c3c;

$light-gray: #eee;
html {
  color: $text-gray;
  font-family: $font-family;
  font-size: $base-font-size;<commit_msg>Paste links from clipboard to add to list<commit_after><template>
  <div>

    <linky-nav>
      <a id="add-icon" @click='showAdd = true' class="icon">+</a>
      <a @click="refreshList" class="icon">🔄</a>
      <a id="settings-icon" @click='showSettings = true' class="icon">⚙</a>
      <a v-if="authenticated" @click='logout'>Logout</a>
      <router-link to="/login" v-else>Login</router-link>
    </linky-nav>

    <nav class="list-options">
      <div class="search-option-section">
        <a class="icon">🔍</a>
        <input class="search" @focusin="searchActive" @blur="doneSearching" id="search" placeholder="search" type="search" v-model="query">
      </div>
      <div class="list-archive-option-section">
        <!-- FIXME -->
        <router-link :class="{ inactive: parentName !== 'list' }" to="/list">List</router-link>
        <router-link :class="{ inactive: parentName !== 'archive' }" to="/archive">Archive</router-link>
      </div>
    </nav>

    <ul class="link-container">
      <slot></slot>
    </ul>

    <helpModal :show="showHelp" @close="showHelp = false"></helpModal>
    <showSettingsModal :show="showSettings" @closed="showSettings = false"></showSettingsModal>
    <addLinkModal :show="showAdd" @closed="showAdd = false"></addLinkModal>
  </div>
</template>

<script>

import linkyNav from './LinkyNav.vue'
import helpModal from './helpModal.vue'
import showSettingsModal from './showSettingsModal.vue'
import addLinkModal from './addLinkModal.vue'

import list_nav from '../nav.js'
list_nav()

export default {
  name: 'list-base',
  components: {
    linkyNav,
    addLinkModal,
    showSettingsModal,
    helpModal,
  },
  data () {
    return {
      query: '',
      showAdd: false,
      showSettings: false,
      showHelp: false,
      searching: false,
    }
  },
  props: {
    parentName: {
      type: String,
      required: true,
    }
  },
  mounted() {
    this.$store.dispatch('refreshLinks')
    document.addEventListener('paste', this.pasteHandler)
  },
  beforeDestroy () {
    document.removeEventListener('paste', this.pasteHandler)
  },
  computed: {
    authenticated () {
      return this.$store.state.user.authenticated
    },
  },
  methods: {
    refreshList() {
      this.$store.dispatch('refreshLinks')
    },
    logout() {
      this.$store.dispatch('logout').then(this.$router.replace('/'))
    },
    pasteHandler (e) {
      const paste = e.clipboardData.getData('text')
      if (paste.length > 0 && this.$store.state.errors.addLink == null && !this.searching && !this.showAdd && !this.showHelp && !this.showSettings) {
        this.$store.dispatch('addLink', paste).then(console.log('Added link from paste'))
      }
    },
    searchActive () {
      this.searching = true
    },
    doneSearching () {
      this.searching = false
    },
  },
}

</script>

<style lang='scss'>

$font-family: georgia, serif;
$base-font-size: 18px;

$text-gray: #444;
$max-width-main-content: 40em;

// background colors
$sepia: #f8f2e3;
$grayblack: #3c3c3c;

$light-gray: #eee;
html {
  color: $text-gray;
  font-family: $font-family;
  font-size: $base-font-size;
{'fraction_non_alphanumeric': 0.18261964735516373, 'fraction_numerical': 0.004857862540482188, 'mean_word_length': 3.142324888226528, 'pattern_counts': {'":': 0, '<': 89, '<?xml version=': 0, '>': 90, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6066787', 'n_tokens_mistral': 1924, 'n_tokens_neox': 1881, 'n_words': 350}