<template>
    <div class="font-sins min-h-screen ">
        <!-- posters -->
        <div class="w-full" v-if="poster.poster">
            <a :href="poster.poster.link">
                <img :src="`${useRuntimeConfig().public.MediaUrl}${poster.poster.big_image}`" alt="pc poster"
                    class="object-cover hidden md:flex"></a>
            <a :href="poster.poster.link">
                <img :src="`${useRuntimeConfig().public.MediaUrl}${poster.poster.small_image}`" alt="phone poster"
                    class="md:hidden object-cover mx-auto h-40 w-96 rounded-lg mt-1"></a>
        </div>
        <!-- search -->
        <form class="max-w-md mx-auto mt-4">
            <label for="default-search"
                class="mb-2 text-sm font-medium text-zinc-950 sr-only dark:text-white">Search</label>
            <div class="relative">
                <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                    <svg class="w-4 h-4 text-zinc-500 dark:text-zinc-400" aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
                    </svg>
                </div>
                <input type="search" id="default-search" v-model="textSearchUser" @input="moveToSearchPage()"
                    class="block w-full p-2 ps-10 text-xs text-zinc-950 border border-zinc-300 rounded-lg bg-zinc-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-zinc-700 dark:border-zinc-600 dark:placeholder-zinc-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    placeholder="جستجو در میان مقالات، نویسنده‌ها و کلیدواژه‌ها ..." required />
            </div>
        </form>
        <!-- login -->
        <UserLogin v-if="!store.isAuthenticated" />
        <ActivityTiles />
        <MaghaleFooter />
    </div>
</template>



<script setup>
import axios from 'axios';
import { useMaghaleStore } from '~/store';

useSeoMeta({
  title: 'مقاله',
  ogTitle: 'مقاله',
  creator: 'حدید',
  author: 'محمد سبک دست',
  publisher: 'hadid',
  ogType: 'website',
  ogSiteName: 'مقاله',
  description: 'مطالعه مشترک مقاله های علمی و تحقیقاتی در بستر هوش مصنوعی',
  ogDescription: 'مطالعه مشترک مقاله های علمی و تحقیقاتی در بستر هوش مصنوعی',
  ogUrl: 'https://maghaale.ir',
})

const store = useMaghaleStore()
const poster = ref({})

function getPosters() {
    axios
        .get(`${useRuntimeConfig().public.BaseUrl}posters/HomePosters/3`)
        .then((r) => {
            if (r.data.length) {
                poster.value = r.data[0]
            }
        })
}

var textSearchUser = ref('')

function moveToSearchPage() {
    if (textSearchUser.value.length > 2) {
        store.setSearch(textSearchUser.value)
        useRouter().push(useRuntimeConfig().public.router.UserSearch)
    }
}

onMounted(() => {
    getPosters()
})
</script>