<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Report</title>

    <!-- If using external CSS, convert to absolute path or inline CSS -->
    <!-- <link rel="stylesheet" href="pdfstyle.css" /> -->
</head>

<body>
    <div class="cs-container">
        <div class="cs-invoice cs-style1">
            <div class="cs-invoice_in">

                <!-- HEADER -->
                <div class="cs-invoice_head cs-type1 cs-mb10">
                    <div class="cs-invoice_left">
                        <p class="cs-invoice_number cs-primary_color cs-mb5 cs-f16">
                            <b class="cs-primary_color">Report for {{username}}</b>
                        </p>
                        <p class="cs-invoice_date cs-primary_color cs-m0">
                            <b class="cs-primary_color">Date:</b> {{dateRange}}
                        </p>
                    </div>
                </div>

                <!-- TABLE -->
                <div class="cs-table cs-style1">
                    <div class="cs-round_border">
                        <div class="cs-table_responsive">
                            <table>
                                <thead>
                                    <tr>
                                        <th class="cs-width_4 cs-bold cs-primary_color cs-focus_bg cs-text_right"
                                            style="background-color:#333333;color:#fff;">Total Hours</th>
                                        <th class="cs-width_4 cs-bold cs-primary_color cs-focus_bg cs-text_right"
                                            style="background-color:#333333;color:#fff;">Rate Per Hour</th>
                                        <th class="cs-width_4 cs-bold cs-primary_color cs-focus_bg cs-text_right"
                                            style="background-color:#333333;color:#fff;">Total Amount</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    <tr>
                                        <td class="cs-width_4 cs-text_right">
                                            {{total_hours}} Hours {{total_minutes}} Minutes
                                        </td>

                                        <td class="cs-width_4 cs-text_right">
                                            ${{rate_per_hour}}
                                        </td>

                                        <td class="cs-width_4 cs-text_right">
                                            ${{amount}}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <!-- FOOTER SUMMARY -->
                        <div class="cs-invoice_footer cs-border_top">
                        </div>
                    </div>

                    <!-- SUMMARY BOX -->
                    <div class="cs-note">
                        <div class="cs-note_left">
                            <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
                                <path d="M416 221.25V416a48 48 0 01-48 48H144a48 48 0 01-48-48V96a48 48 0 0148-48h98.75a32 32 0 0122.62 9.37l141.26 141.26a32 32 0 019.37 22.62z"
                                      fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" />
                                <path d="M256 56v120a32 32 0 0032 32h120M176 288h160M176 368h160"
                                      fill="none" stroke="currentColor" stroke-linecap="round"
                                      stroke-linejoin="round" stroke-width="32" />
                            </svg>
                        </div>

                        <div class="cs-note_right">
                            <p class="cs-mb0">
                                <b class="cs-primary_color cs-bold">Total Amount: ${{amount}}</b>
                            </p>
                            <p class="cs-mb0">
                                <b class="cs-primary_color cs-bold">
                                    Total Hours: {{total_hours}} Hours {{total_minutes}} Minutes
                                </b>
                            </p>
                        </div>
                    </div>

                </div><!-- .cs-table -->
            </div><!-- .cs-invoice_in -->
        </div><!-- .cs-invoice -->
    </div><!-- .cs-container -->
</body>

</html>