<app-layout>
    <Head>
        <title>{{ $t('Articles') }}</title>
        <meta name="description" content="">
    </Head>
    <!-- table components start -->
    <div class="table-components">

        <div class="container px-2 py-10 mx-auto">
            <div class="flex flex-wrap w-full mb-20">
                <div class="lg:w-1/2 w-full mb-6 lg:mb-0">
                    <h1 class="sm:text-3xl text-2xl font-medium title-font mb-2">{{ $t('News & Announcements')}}</h1>
                    <div class="h-1 w-20 bg-indigo-500 rounded"></div>
                </div>
            </div>

            <div class="flex flex-wrap -m-4">
                <div @click="setArticle(article)" v-for="article in articles.data" :key="article.id" class="cursor-pointer xl:w-1/4 md:w-1/2 p-4">
                    <div class="bg-gray-100 p-6 rounded-lg bg-article-dark">
                        <img class="h-40 rounded w-full object-center mb-6" :src="article.thumbnail" alt="content">
                        <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">{{ article.created_at }} </h3>
                        <h2 class="text-lg font-medium title-font mb-4">{{ article.title }}</h2>
                    </div>
                </div>

            </div>
        </div>

        <!-- tables start -->
        <table class="tables mob-table-launchpads-all">
            <!-- tfood start -->
            <tfoot class="table-result">
            <tr>
                <td colspan="100">
                    <div v-if="articles.data.length == 0" class="table-result__notfound">
                        <span class="table-result__notfound-icon">
                            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path class="table-result__notfound-color" d="M21 13V11C21 7.73081 21 6.09621 20.3272 4.86413C19.8219 3.93873 19.0613 3.17807 18.1359 2.67277C16.9038 2 15.2692 2 12 2V2C8.73081 2 7.09621 2 5.86413 2.67277C4.93873 3.17807 4.17807 3.93873 3.67277 4.86413C3 6.09621 3 7.73081 3 11V12.5C3 16.2433 3 18.1149 3.87311 19.4735C4.29935 20.1368 4.86322 20.7006 5.52648 21.1269C6.88505 22 8.7567 22 12.5 22V22H13" stroke="#222628"/>
                                <line class="table-result__notfound-color" x1="15.5" y1="13.5" x2="7.5" y2="13.5"/>
                                <line class="table-result__notfound-color" x1="15.5" y1="10.5" x2="7.5" y2="10.5"/>
                                <line class="table-result__notfound-color" x1="11.5" y1="7.5" x2="7.5" y2="7.5"/>
                                <rect class="table-result__notfound-color color-yellow" x="14.8335" y="14.8335" width="7.08333" height="7.08333" rx="3.54167"/>
                                <line class="table-result__notfound-color color-yellow" x1="21.1803" y1="21.3066" x2="22.5565" y2="22.6829"/>
                            </svg>
                        </span>
                        <span class="table-result__notfound-text">{{ $t('No articles found.') }}</span>
                    </div>
                    <div v-else>
                        <pagination :links="articles.meta.links" />
                    </div>
                </td>
            </tr>
            </tfoot>
            <!-- tfood end -->

        </table>
        <!-- tables end -->

    </div>
    <!-- table components end -->

</app-layout>
