<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Medikamentenübersicht</title>
  <link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body class="bg-light">

<nav class="navbar navbar-dark bg-dark position-relative px-3">

    <!-- 🟢 ZENTRIERTER TITEL -->
    <div class="position-absolute top-50 start-50 translate-middle
                d-flex align-items-center gap-2 text-white">
        <span style="font-size:1.3rem;">💊</span>
        <span class="fw-semibold fs-5">Medikamentenübersicht</span>
    </div>

    <!-- 🔵 RECHTS: DASHBOARD -->
    <div class="ms-auto">
        <a href="/dashboard" class="btn btn-outline-light btn-sm">
            ⬅️ Dashboard
        </a>
    </div>

</nav>

<div class="container mt-4">
    <%- include("partials/flash") %>
    <div class="card shadow">
        <div class="card-body">

            <div class="table-responsive">
                <table class="table table-bordered table-hover table-sm align-middle">
                    <thead class="table-dark">
                        <tr>
                            <th>Medikament</th>
                            <th>Darreichungsform</th>
                            <th>Dosierung</th>
                            <th>Packung</th>
                        </tr>
                    </thead>
                <tbody>
                <% rows.forEach(r => { %>
                    <tr>
                        <form method="POST"
                            action="/medications/update/<%= r.id %>">

                            <td>
                                <input type="text"
                                    name="medication"
                                    value="<%= r.medication %>"
                                    class="form-control form-control-sm"
                                    required>
                            </td>

                            <td>
                                <input type="text"
                                    name="form"
                                    value="<%= r.form %>"
                                    class="form-control form-control-sm">
                            </td>

                            <td>
                                <input type="text"
                                    name="dosage"
                                    value="<%= r.dosage %>"
                                    class="form-control form-control-sm">
                            </td>

                            <td class="d-flex gap-2">
                                <input type="text"
                                    name="package"
                                    value="<%= r.package %>"
                                    class="form-control form-control-sm">

                                <button class="btn btn-sm btn-outline-success"
                                        type="submit">
                                    💾
                                </button>
                            </td>

                        </form>
                    </tr>
                <% }) %>
            </tbody>

                </table>
            </div>

        </div>
    </div>

</div>

</body>
</html>
