@extends('layouts.app')

@section('content')
{{--
    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Genel Bakış') }}
        </h2>
    </div>
--}}

    <div class="py-8">
        <div class="max-w-screen-2xl mx-auto sm:px-6 lg:px-8 grid gap-6">

            <div class="bg-white rounded-lg shadow-md py-16 sm:py-24 lg:py-32">
                <div class="mx-auto max-w-7xl px-6 lg:px-8">
                    <div class="max-w-2xl text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
                        <h2 class="inline sm:block">Want product news and updates?</h2>
                        <p class="inline sm:block">Sign up for our newsletter.</p>
                    </div>
                    <form class="mt-10 max-w-md">
                        <div class="flex gap-x-4">
                            <label for="email-address" class="sr-only">Email address</label>
                            <input id="email-address" name="email" type="email" autocomplete="email" required class="min-w-0 flex-auto rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6" placeholder="Enter your email">
                            <x-a-black href="" click="" type="" ring="emerald">
                                SUBSCRIBE
                            </x-a-black>
                        </div>
                        <p class="mt-4 text-sm leading-6 text-gray-900">We care about your data. Read our <a href="#" class="font-semibold text-emerald-600 hover:text-emerald-500">privacy&nbsp;policy</a>.</p>
                    </form>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-md p-8">
                <ul role="list" class="divide-y divide-gray-100">
                    @foreach($links_all as $link)
                        <li class="flex flex-wrap items-center justify-between gap-x-6 gap-y-4 py-5 sm:flex-nowrap">
                            <div>
                                <p class="text-sm font-semibold leading-6 text-gray-900">
                                    <a href="#" class="hover:underline">{{ $link->name }} <span>/{{ $link->short_code }}</span></a>
                                </p>
                                <div class="mt-1 flex items-center gap-x-2 text-xs leading-5 text-gray-500">
                                    <p>
                                        <a href="#" class="hover:underline">{{ $link->original_url }}</a>
                                    </p>
                                    <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
                                        <circle cx="1" cy="1" r="1" />
                                    </svg>
                                    <p><time datetime="2023-01-23T22:34Z">2d ago</time></p>
                                </div>
                            </div>
                            <dl class="flex w-full flex-none justify-between gap-x-8 sm:w-auto">
                                <div class="flex -space-x-0.5">
                                    <dt class="sr-only">Commenters</dt>
                                    <dd>
                                        <img class="h-6 w-6 rounded-full bg-gray-50 ring-2 ring-white" src="https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Emma Dorsey">
                                    </dd>
                                    <dd>
                                        <img class="h-6 w-6 rounded-full bg-gray-50 ring-2 ring-white" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Tom Cook">
                                    </dd>
                                    <dd>
                                        <img class="h-6 w-6 rounded-full bg-gray-50 ring-2 ring-white" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Lindsay Walton">
                                    </dd>
                                    <dd>
                                        <img class="h-6 w-6 rounded-full bg-gray-50 ring-2 ring-white" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Benjamin Russel">
                                    </dd>
                                    <dd>
                                        <img class="h-6 w-6 rounded-full bg-gray-50 ring-2 ring-white" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Hector Gibbons">
                                    </dd>
                                </div>
                                <div class="flex w-16 gap-x-2.5">
                                    <dt>
                                        <span class="sr-only">Total comments</span>
                                        <svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
                                        </svg>
                                    </dt>
                                    <dd class="text-sm leading-6 text-gray-900">24</dd>
                                </div>
                            </dl>
                        </li>
                    @endforeach
                </ul>


            </div>
        </div>
    </div>
@endsection