<!-- src/main/resources/templates/companies.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>SynergyMed – Компании</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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);
        }

        /* Global sticky header: force square corners here to override any rounded styles from fragments */
        .site-header{
            position:sticky;
            top:0; left:0; right:0;
            width:100%;
            z-index:1000;
            background:white !important;
            box-shadow:0 2px 10px rgba(0,0,0,0.1);
            border-radius:0 !important;                 /* ensure no rounding */
            border-top-left-radius:0 !important;        /* defend against logical/longhand corner rules */
            border-top-right-radius:0 !important;
            border-bottom-left-radius:0 !important;
            border-bottom-right-radius:0 !important;
        }

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

        .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}
        .badge{
            display:inline-block;
            background:rgba(32,178,170,.12);
            color:#137a74;
            padding:4px 8px;
            border-radius:999px;
            font-size:.80rem;
            font-weight:700;
            margin-right:6px;
        }
        .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)}

        .row{display:flex;justify-content:space-between;align-items:center;margin-top:12px}

        .clickable{cursor:pointer}
    </style>
</head>
<body>
<th:block th:replace="fragments/header :: siteHeader('Компании')"></th:block>

<div class="page">
    <div class="card">
        <div class="card-header">
            <span>Компании</span>
            <a class="btn btn-primary" th:href="@{/admin/companies/new}">Креирај</a>
        </div>
        <div class="card-body">
            <div class="grid">
                <div class="company-card clickable"
                     th:each="c : ${companies}"
                     th:attr="data-href=@{/admin/companies/{id}/facilities(id=${c.id})}">
                    <div class="content">
                        <div class="title" th:text="${c.companyName}">Име на компанија</div>
                        <div class="muted" th:text="${'Рег. број: ' + c.registrationNumber}">Регистрациски број</div>
                        <div class="muted" th:text="${c.description}">Опис</div>

                        <div style="margin-top:8px;">
                            <span class="badge" th:each="r : ${rolesByCompany[c.id]}" th:text="${r}">УЛОГА</span>
                        </div>

                        <div class="row">
                            <div>
                                <a class="btn-outline" th:href="@{/admin/companies/{id}/edit(id=${c.id})}" style="margin-right:8px;">Измени</a>
                            </div>
                            <form th:action="@{/admin/companies/{id}/delete(id=${c.id})}" method="post" style="display:inline">
                                <button type="submit" class="btn-outline" style="color:#b3261e;border-color:#f0caca">Избриши</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <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); });
                        card.querySelectorAll('a, button, input, select, textarea, label, form').forEach(function (el) {
                            el.addEventListener('click', function (e) { e.stopPropagation(); });
                        });
                    });
                });
            </script>
        </div>
    </div>
</div>

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