<html>

<head>
    <meta charset="UTF-8" />
    <style>
        body {
            padding: 2rem 3rem;
        }
        table {
            width: 100%;
            border-collapse: collapse
        }
        td {
            vertical-align: top;
        }

        .border-table,
        .border-table td,
        .border-table th {
            border: 1px solid black;
        }
        .section-title {
            margin-top: 1rem;
            margin-bottom: 0rem;
        }
        .data-label {            
            width: 9rem;
        }
        .data-colon {            
            width: 0.1234rem;
        }
    </style>
</head>

<body style="font-family: Arial, sans-serif; line-height: 1.4">
    <!-- Tanggal Terbit (top-right) -->
    <div style="
        text-align: right; 
        margin-right: 2rem; 
        font-size: 0.95rem;
        margin-top: 0.5rem;
    ">
        Tanggal Terbit : {{ .IssuedDate }}
    </div>

    <!-- Patient Info Box -->
     <table 
        style="
            margin-top: 1rem;
            margin-left: auto;
            margin-right: 2rem;   /* space from right like example */
            border: 1px solid #000;
            padding: 0.5rem 1rem;
            border-collapse: separate;
            border-spacing: 0.3rem 0.2rem;
            width: auto;
        "
    >
        <tr>
            <td style="width: 9rem;"><b>No. RM</b></td>
            <td class="data-colon">:</td>
            <td><b>{{ .MedicalRecord }}</b></td>
        </tr>
        <tr>
            <td><b>Nama</b></td>
            <td class="data-colon">:</td>
            <td><b>{{ .Name }}</b></td>
        </tr>
        <tr>
            <td><b>Tanggal Lahir</b></td>
            <td class="data-colon">:</td>
            <td>{{ .BirthDate }}</td>
        </tr>
    </table>

    <table class="border-table" 
       style="margin-top: 1rem; width: 100%; table-layout: fixed;">

    <tr>
        <th style="width: 3rem; text-align:center;">NO</th>
        <th style="width: 9rem; text-align:center;">Tanggal/jam</th>
        <th style="width: auto;">
            Implementasi, Monitoring, Fasilitasi, koordinasi, komunikasi dan kolaborasi,
            advokasi, hasil pelayanan, Terminasi
        </th>
        <th style="width: 9rem; text-align:center;">MPP</th>
    </tr>

    {{ range .FormB }}
    <tr>
        <td style="text-align: center;">{{ .Number }}</td>
        <td style="text-align: center;">{{ .Date }}</td>

        <td style="white-space: normal; word-wrap: break-word;">
            {{ .Value }}
        </td>

        <td style="text-align: center; white-space: normal;">
            {{ .Employee_Name }}
        </td>
    </tr>
    {{ end }}

</table>

    <div style="height: 3rem;"></div>
</body>

</html>