@extends('layouts.site')

@section('content')
<div class="max-w-7xl mx-auto px-6 py-6">
    <!-- Breadcrumbs -->
    <nav class="flex flex-col lg:flex-row gap-4 items-center justify-between text-gray-600 bg-white px-4 py-4 text-base shadow-md mt-0">
        <div class="flex flex-wrap items-center gap-2">
            <a href="{{ route('home') }}" class="hover:text-green-700 font-semibold transition-colors duration-300">Home</a>
            <span class="mx-1 text-gray-400">/</span>
            <a href="{{ route('medicamentos.index') }}" class="hover:text-green-700 font-semibold transition-colors duration-300">Medicamentos</a>
            <span class="mx-1 text-gray-400">/</span>
            <span class="text-green-800 font-semibold">Trocas Abertas</span>
        </div>

        <div class="flex-shrink-0">
            <a href="{{ url()->previous() }}"
               class="bg-gray-600 hover:bg-gray-700 text-white font-semibold py-2 px-6 shadow-md hover:shadow-lg transition-all duration-300 flex items-center gap-2">
                <i class="ri-arrow-left-line text-lg"></i>
                Voltar
            </a>
        </div>
    </nav>


    <!-- Título -->
    <h1 class="text-4xl font-bold text-green-700 my-12 text-center tracking-tight">Informações Usuário</h1>


</div>

<!-- Script para inicializar o Swiper -->
@vite('resources/js/app.js')

@endsection