<template>
  <div class="chat-container">
    <header class="header">
      <router-link to="/" class="app-brand app-brand-link">
        <span class="app-brand-mark">S</span>
        <div class="app-brand-copy">
          <span class="app-brand-eyebrow">SingleChat</span>
          <h1>Partner</h1>
        </div>
      </router-link>
      <HeaderAdBanner />
    </header>
    
    <MenuBar />
    
    <div class="horizontal-box">
      <UserList />
      
      <div class="content">
        <div class="partners-view">
          <h2>Partner</h2>
          <p class="partners-intro">
            Auf dieser Seite findest du Empfehlungen und befreundete Projekte. Wir verlinken nur Seiten, die wir als
            sinnvoll für unsere Community einschätzen. Die Inhalte der verlinkten Seiten liegen in der Verantwortung der
            jeweiligen Betreiber.
          </p>
          <p class="partners-intro">
            Hinweis: Externe Links öffnen sich in einem neuen Tab. Wenn du Partner werden möchtest, schreib uns bitte
            über die Feedback-Seite.
          </p>
          <p class="partners-intro">
            Wenn du zuerst wissen möchtest, wie privater und anonymer Chat bei uns funktioniert, schau in unsere
            <router-link to="/faq">FAQ</router-link> oder auf die Seite
            <router-link to="/sicherheit">Sicherheit &amp; Privatsphäre</router-link>.
          </p>
          <div v-if="!chatStore.isLoggedIn" class="back-link">
            <router-link to="/">Zurück zur Hauptseite</router-link>
          </div>
          <ul class="partners-list">
            <li v-for="partner in partners" :key="partner.url">
              <a :href="partner.url" target="_blank" rel="noopener noreferrer">
                {{ partner['Page Name'] }}
              </a>
              <span class="partners-meta">Externer Link</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    
    <ImprintContainer />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import MenuBar from '../components/MenuBar.vue';
import UserList from '../components/UserList.vue';
import HeaderAdBanner from '../components/HeaderAdBanner.vue';
import ImprintContainer from '../components/ImprintContainer.vue';
import { useChatStore } from '../stores/chat';

const router = useRouter();
const chatStore = useChatStore();
const partners = ref([]);

onMounted(async () => {
  try {
    const response = await axios.get('/api/partners');
    partners.value = response.data;
  } catch (error) {
    console.error('Fehler beim Laden der Partner:', error);
  }
});
</script>

<style scoped>
.partners-view {
  padding: 20px;
  max-width: 980px;
}

.partners-intro {
  margin: 10px 0;
  color: #344038;
  line-height: 1.55;
}

.partners-list {
  margin-top: 16px;
  padding-left: 18px;
}

.partners-list li {
  margin-bottom: 10px;
}

.partners-meta {
  margin-left: 10px;
  font-size: 12px;
  color: #637067;
}

.app-brand-link {
  text-decoration: none;
}
</style>
