@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-slate-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">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">

                <div class="px-4 py-10 sm:px-6 lg:px-8">
                    <div class="mx-auto flex items-center justify-between gap-x-8 lg:mx-0">
                        <div class="flex items-center gap-x-6">
                            <img src="https://tailwindui.com/img/logos/48x48/tuple.svg" alt="" class="h-16 w-16 flex-none rounded-full ring-1 ring-slate-900/10">
                            <h1>
                                <div class="text-sm leading-6 text-slate-500">Invoice <span class="text-slate-700">#00011</span></div>
                                <div class="mt-1 text-base font-semibold leading-6 text-slate-900">Tuple, Inc</div>
                            </h1>
                        </div>
                        <div class="flex items-center gap-x-4 sm:gap-x-6">
                            <button type="button" class="hidden text-sm font-semibold leading-6 text-slate-900 sm:block">Copy URL</button>
                            <a href="#" class="hidden text-sm font-semibold leading-6 text-slate-900 sm:block">Edit</a>
                            <a href="#" class="rounded-md bg-slate-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600">Send</a>

                            <div class="relative sm:hidden">
                                <button type="button" class="-m-3 block p-3" id="more-menu-button" aria-expanded="false" aria-haspopup="true">
                                    <span class="sr-only">More</span>
                                    <svg class="h-5 w-5 text-slate-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path d="M10 3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM10 8.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM11.5 15.5a1.5 1.5 0 10-3 0 1.5 1.5 0 003 0z" />
                                    </svg>
                                </button>

                                <!--
                                  Dropdown menu, show/hide based on menu state.

                                  Entering: "transition ease-out duration-100"
                                    From: "transform opacity-0 scale-95"
                                    To: "transform opacity-100 scale-100"
                                  Leaving: "transition ease-in duration-75"
                                    From: "transform opacity-100 scale-100"
                                    To: "transform opacity-0 scale-95"
                                -->
                                <div class="absolute right-0 z-10 mt-0.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-slate-900/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="more-menu-button" tabindex="-1">
                                    <!-- Active: "bg-slate-50", Not Active: "" -->
                                    <button type="button" class="block w-full px-3 py-1 text-left text-sm leading-6 text-slate-900" role="menuitem" tabindex="-1" id="more-menu-item-0">Copy URL</button>
                                    <a href="#" class="block px-3 py-1 text-sm leading-6 text-slate-900" role="menuitem" tabindex="-1" id="more-menu-item-1">Edit</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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