<!-- templates/facilities.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title th:text="${'SynergyMed – Објекти'}">SynergyMed – Објекти</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Header styles -->
    <th:block th:replace="fragments/header :: headerStyles"></th:block>

    <style>
        :root {
            --teal-1:#20b2aa; --teal-2:#48d1cc;
            --bg:#fefeff; --card:#ffffff;
            --muted:#6c757d; --text:#1f2937;
            --shadow:0 20px 40px rgba(0,0,0,0.10);
            --shadow-sm:0 6px 18px rgba(0,0,0,0.08);
        }
        *{margin:0;padding:0;box-sizing:border-box}

        body{
            font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
            min-height:100vh;
            background:linear-gradient(135deg,#a4ecba 0%,#fefeff 100%);
            color:var(--text);
        }

        /* Full-width global header */
        .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);
        }

        .page{width:100%; max-width:1200px; padding:28px; margin:0 auto}

        /* Card wrapper */
        .card{
            background:var(--card);
            border-radius:18px;
            box-shadow:var(--shadow);
            margin-bottom:28px;
            overflow:hidden;
        }

        .card-header{
            background:linear-gradient(135deg,var(--teal-1),var(--teal-2));
            color:#fff;
            padding:20px 24px;
            display:flex; justify-content:space-between; align-items:center;
            font-size:1.3rem; font-weight:600;
        }

        .card-body{padding:22px}

        .btn{
            display:inline-block; border:none; cursor:pointer; text-decoration:none;
            padding:12px 16px; border-radius:12px; font-weight:600;
            letter-spacing:.5px; transition:.2s ease;
        }
        .btn-primary{
            background:linear-gradient(135deg,var(--teal-1),var(--teal-2));
            color:#fff;
            box-shadow:0 10px 20px rgba(32,178,170,.25);
        }
        .btn-primary:hover{transform:translateY(-2px)}

        .grid{
            display:grid;
            grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
            gap:22px;
        }
        .company-card{
            background:var(--card);
            border-radius:18px;
            box-shadow:var(--shadow-sm);
            overflow:hidden;
            display:flex; flex-direction:column;
        }
        .content{padding:16px 18px}
        .title{font-weight:700;margin:6px 0 2px}
        .muted{color:var(--muted);font-size:.92rem}
        .btn-outline{
            background:#fff;
            border:2px solid rgba(32,178,170,.25);
            color:#20b2aa;
            padding:8px 12px;
            border-radius:10px;
            text-decoration:none;
            font-weight:600;
            transition:.2s ease;
        }
        .btn-outline:hover{border-color:#20b2aa;box-shadow:0 6px 14px rgba(32,178,170,.18)}

        /* Three-column action row: left / center / right */
        .row{
            display:grid;
            grid-template-columns: 1fr auto 1fr; /* left fills, middle auto, right fills */
            align-items:center; /* center vertically */
            gap:8px;
            margin-top:12px;
        }
        .row > .left   { justify-self:start; }   /* left button aligns to start of col 1 */
        .row > .middle { justify-self:center; } /* middle button perfectly centered */
        .row > .right  { justify-self:end; }    /* right delete aligns to end of col 3 */

        /* Clickable card cursor */
        .clickable { cursor: pointer; }

        @media (max-width:560px){.page{padding:16px}}
    </style>
</head>
<body>

<!-- Global header -->
<th:block th:replace="fragments/header :: siteHeader('Објекти на аптеката')"></th:block>

<div class="page">
    <div class="card">
        <div class="card-header">
            <span th:text="${'Објекти — ' + company.companyName}">Објекти</span>
            <a class="btn btn-primary" sec:authorize="hasRole('ADMIN')"
               th:href="@{/admin/companies/{cid}/facilities/new(cid=${company.id})}">
                Додади нов
            </a>
        </div>

        <div class="card-body">
            <!-- Grid list when facilities exist -->
            <div class="grid" th:if="${!#lists.isEmpty(facilities)}">
                <div class="company-card clickable"
                     th:each="f : ${facilities}"
                     th:attr="data-href=@{/admin/companies/{cid}/facilities/{id}/inventory(cid=${company.id}, id=${f.id})}">
                    <div class="content">
                        <div class="title" th:text="${f.facilityName}">Име на објект</div>
                        <div class="muted" th:text="${'Код: ' + f.code}">Код</div>

                        <div class="row">
                            <!-- Left: Edit -->
                            <a class="btn-outline left" sec:authorize="hasRole('ADMIN')"
                               th:href="@{/admin/companies/{cid}/facilities/{id}/edit(cid=${company.id}, id=${f.id})}">
                                Уреди
                            </a>

                            <!-- Middle: Contact (centered) -->
                            <a class="btn-outline middle" sec:authorize="hasRole('ADMIN')"
                               th:href="@{/admin/companies/{cid}/facilities/{id}/contacts(cid=${company.id}, id=${f.id})}">
                                Контакт
                            </a>

                            <!-- Right: Delete -->
                            <form class="right" sec:authorize="hasRole('ADMIN')"
                                  th:action="@{/admin/companies/{cid}/facilities/{id}/delete(cid=${company.id}, id=${f.id})}"
                                  method="post" style="display:inline">
                                <button type="submit" class="btn-outline" style="color:#b3261e;border-color:#f0caca">
                                    Избриши
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Empty state -->
            <div th:if="${#lists.isEmpty(facilities)}" class="muted" style="margin-top:8px;">
                Сè уште нема објекти за оваа компанија.
            </div>

            <!-- Click navigation script -->
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    document.querySelectorAll('.company-card.clickable').forEach(function (card) {
                        const href = card.getAttribute('data-href');
                        if (!href) return;
                        card.addEventListener('click', function () {
                            window.location.assign(href);
                        });
                        // Prevent inner interactive elements from triggering card click
                        card.querySelectorAll('a, button, input, select, textarea, label, form').forEach(function (el) {
                            el.addEventListener('click', function (e) { e.stopPropagation(); });
                        });
                    });
                });
            </script>
        </div>
    </div>
</div>

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