<?xml version="1.0" encoding="utf-8"?>
<odoo>

    <!-- Reports Portal Page -->
    <template id="portal_report_page" name="Fusion Clock Reports">
        <t t-call="portal.portal_layout">
            <t t-set="breadcrumbs_searchbar" t-value="False"/>
            <t t-set="no_breadcrumbs" t-value="True"/>
            <t t-set="no_header" t-value="True"/>

            <div class="fclk-app">
                <div class="fclk-reports-container">

                    <!-- Header -->
                    <div class="fclk-ts-header" style="margin-bottom:24px;">
                        <h2>Reports</h2>
                    </div>

                    <!-- Reports List -->
                    <t t-if="reports">
                        <t t-foreach="reports" t-as="report">
                            <div class="fclk-report-item">
                                <div class="fclk-report-info">
                                    <h4>
                                        <t t-esc="report.date_start.strftime('%b %d')"/> -
                                        <t t-esc="report.date_end.strftime('%b %d, %Y')"/>
                                    </h4>
                                    <p>
                                        <t t-esc="'%.1f' % report.net_hours"/>h net |
                                        <t t-esc="report.days_worked"/> days |
                                        <t t-esc="dict([('weekly','Weekly'),('biweekly','Bi-Weekly'),('semi_monthly','Semi-Monthly'),('monthly','Monthly')]).get(report.schedule_type, '')"/>
                                    </p>
                                </div>
                                <t t-if="report.report_pdf">
                                    <a t-attf-href="/my/clock/reports/#{report.id}/download"
                                       class="fclk-report-download">
                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:middle; margin-right:4px;">
                                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                            <polyline points="7 10 12 15 17 10"/>
                                            <line x1="12" y1="15" x2="12" y2="3"/>
                                        </svg>
                                        PDF
                                    </a>
                                </t>
                                <t t-else="">
                                    <span style="color:#6b7280; font-size:12px;">Pending</span>
                                </t>
                            </div>
                        </t>
                    </t>
                    <t t-else="">
                        <div class="fclk-empty-state">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="1.5">
                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                <polyline points="14 2 14 8 20 8"/>
                            </svg>
                            <p>No reports available yet.</p>
                            <p style="font-size:12px; margin-top:4px;">Reports are generated automatically at the end of each pay period.</p>
                        </div>
                    </t>

                    <!-- Navigation Bar -->
                    <div class="fclk-nav-bar">
                        <a href="/my/clock" class="fclk-nav-item">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <circle cx="12" cy="12" r="10"/>
                                <polyline points="12 6 12 12 16 14"/>
                            </svg>
                            <span>Clock</span>
                        </a>
                        <a href="/my/clock/timesheets" class="fclk-nav-item">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                                <line x1="16" y1="2" x2="16" y2="6"/>
                                <line x1="8" y1="2" x2="8" y2="6"/>
                                <line x1="3" y1="10" x2="21" y2="10"/>
                            </svg>
                            <span>Timesheets</span>
                        </a>
                        <a href="/my/clock/reports" class="fclk-nav-item fclk-nav-active">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                <polyline points="14 2 14 8 20 8"/>
                                <line x1="16" y1="13" x2="8" y2="13"/>
                                <line x1="16" y1="17" x2="8" y2="17"/>
                            </svg>
                            <span>Reports</span>
                        </a>
                    </div>

                </div>
            </div>
        </t>
    </template>

</odoo>
