<template>
  <footer>
    <div class="outer-container">
      <div class="outer-grid">
        <div class="inner-grid">
          <div>
            <h3>Classifieds</h3>
            <ul>
              <li>
                <a href="/classified/for-sale">For Sale</a>
              </li>
              <li>
                <a href="/classified/for-free">For Free</a>
              </li>
              <li>
                <a href="/classified/want-to-buy">Looking For</a>
              </li>
              <li>
                <a href="/classified/want-to-borrow">Want to Borrow</a>
              </li>
              <li>
                <a href="/classified/new">New Post</a>
              </li>
            </ul>
          </div>
          <div class="inner-grid-second-row">
            <h3>Housing</h3>
            <ul>
              <li>
                <a href="/housing">For Rent</a>
              </li>
              <li>
                <a href="/housing">Requests</a>
              </li>
              <li>
                <a href="/housing/new">New Post</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="inner-grid">
          <div>
            <h3>San Juan Islands</h3>
            <ul>
              <li>
                <a href="https://groups.orcashub.org" target="_blank">Groups</a>
              </li>
              <li>
                <a href="/events">Events</a>
              </li>
              <li>
                <a href="https://sanjuans.online/" target="_blank"
                  >San Juans Online</a
                >
              </li>
            </ul>
          </div>
          <div class="inner-grid-second-row">
            <h3>About</h3>
            <ul>
              <li>
                <a href="/faq">FAQ</a>
              </li>
              <li>
                <a href="/terms-of-service">Terms of Service</a>
              </li>
              <li>
                <a href="/privacy-policy">Privacy Policy</a>
              </li>
              <li>
                <a href="/donate">Donate</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>
<script>
import { mapState } from 'vuex'
import FollowMe from '../components/FollowMe'

export default {
  components: { FollowMe },
  data () {
    return {
      showFollowMe: false,
      trusted_sources: []
    }
  },
  async mounted () {
    this.$root.$on('update_trusted_sources', async () => {
      this.trusted_sources = await this.$axios.$get('ap_actors/trusted').catch()
    })
    this.trusted_sources = await this.$axios.$get('ap_actors/trusted').catch()
  },
  computed: {
    ...mapState(['settings']),
    footerLinks () {
      if (!this.settings || !this.settings.footerLinks) return []
      return this.settings.footerLinks.map(link => {
        if (/^https?:\/\//.test(link.href)) {
          return { href: link.href, label: link.label.startsWith('common.') ? this.$t(link.label) : link.label }
        } else {
          return { to: link.href, label: link.label.startsWith('common.') ? this.$t(link.label) : link.label }
        }
      })
    }
  }
}
</script>
