<!DOCTYPE html>
<html lang="mk" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Барања на чекање за верификација</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <th:block th:replace="fragments/header :: headerStyles"></th:block>
    <style>
        * { margin:0; padding:0; box-sizing:border-box; }
        body {
            font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
            background:linear-gradient(135deg,#a4ecba 0%,#f7f7f8 100%);
            min-height:100vh;
        }

        .site-header {
            position:sticky; top:0; left:0; right:0;
            width:100%; border-radius:0; margin:0;
            z-index:1000; background:white !important;
            box-shadow:0 2px 10px rgba(0,0,0,0.1);
        }

        .container { max-width:1200px; margin:0 auto; padding:20px; }

        .header {
            background:white; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.1);
            margin-bottom:30px; overflow:hidden;
        }
        .header-content {
            background:linear-gradient(135deg,#20b2aa,#48d1cc);
            color:white; padding:30px; text-align:center;
        }
        .header-content h1 { font-size:2.5rem; font-weight:300; margin-bottom:10px; }
        .header-content p { font-size:1.1rem; opacity:.9; }

        .nav-bar {
            background:white; border-radius:15px; box-shadow:0 5px 15px rgba(0,0,0,.1);
            margin-bottom:30px; padding:20px 30px;
        }
        .nav-links {
            display:flex; gap:20px; align-items:center; flex-wrap:nowrap; overflow-x:auto;
        }
        .nav-link {
            color:#20b2aa; text-decoration:none; padding:10px 20px;
            border-radius:25px; transition:all .3s ease; font-weight:500;
        }
        .nav-link:hover, .nav-link.active {
            background:linear-gradient(135deg,#20b2aa,#48d1cc); color:white;
        }
        .back-btn { margin-left:auto; background:linear-gradient(135deg,#6c757d,#495057); color:white; }

        .card {
            background:white; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.1);
            overflow:hidden; margin-bottom:30px;
        }
        .card-header {
            background:linear-gradient(135deg,#20b2aa,#48d1cc);
            color:white; padding:25px 30px; font-size:1.3rem; font-weight:600;
        }
        .card-body { padding:30px; }
        .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px; }
        .tile {
            background:#f8f9fa; border-radius:16px; box-shadow:0 6px 18px rgba(0,0,0,.08);
            padding:18px; cursor:pointer; border:2px solid #e1e5e9;
            transition:all .3s ease;
        }
        .tile:hover { border-color:#20b2aa; background:#f1fdfd; transform:translateY(-2px); }
        .name { font-weight:700; margin-bottom:8px; }
        .muted { color:#6c757d; }
    </style>
</head>
<body>
<th:block th:replace="fragments/header :: siteHeader(${null})"></th:block>

<div class="container">
    <!-- Header -->
    <div class="header">
        <div class="header-content">
            <h1>Барања на чекање</h1>
            <p>Проверете ги сите клиенти кои чекаат верификација</p>
        </div>
    </div>

    <!-- Navigation -->
    <div class="nav-bar">
        <div class="nav-links">
            <a href="#" th:href="@{/pharmacist/health-profile/create}" class="nav-link">Здравствени профили</a>
            <a href="#" th:href="@{/pharmacist/verification}" class="nav-link active">Верификација на профили</a>
            <a href="#" th:href="@{/pharmacist/supply-orders}" class="nav-link">Нарачка на роба</a>
            <a href="#" th:href="@{/pharmacist/medicine/interactions}" class="nav-link">Интеракции на лекови</a>
            <a href="#" class="nav-link back-btn" th:href="@{/profile}">Назад кон профилот</a>
        </div>
    </div>

    <!-- Content -->
    <div class="card">
        <div class="card-header">Барања на чекање за верификација</div>
        <div class="card-body">
            <div th:if="${#lists.isEmpty(pending)}" class="muted">Нема барања на чекање во моментов.</div>
            <div class="grid" th:if="${!#lists.isEmpty(pending)}">
                <div class="tile"
                     th:each="p : ${pending}"
                     th:attr="data-href=@{/pharmacist/verification/{id}(id=${p.id})}">
                    <div class="name" th:text="${p.client.users.firstName + ' ' + p.client.users.lastName}">Име на клиент</div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded',function(){
        document.querySelectorAll('.tile').forEach(function(t){
            const href=t.getAttribute('data-href'); if(!href) return;
            t.addEventListener('click',()=>window.location.assign(href));
        });
    });
</script>

<th:block th:replace="fragments/header :: headerScripts"></th:block>
</body>
</html>
