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

    <!-- Timesheet Portal Page -->
    <template id="portal_timesheet_page" name="Fusion Clock Timesheets">
        <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-timesheet-container">

                    <!-- Header -->
                    <div class="fclk-ts-header">
                        <h2>Timesheets</h2>
                        <div class="fclk-ts-period-nav">
                            <a t-attf-href="/my/clock/timesheets?period=last"
                               t-attf-class="fclk-ts-period-btn {{ 'fclk-ts-period-btn-active' if period == 'last' else '' }}">
                                Previous
                            </a>
                            <a t-attf-href="/my/clock/timesheets?period=current"
                               t-attf-class="fclk-ts-period-btn {{ 'fclk-ts-period-btn-active' if period == 'current' else '' }}">
                                Current
                            </a>
                        </div>
                    </div>

                    <!-- Period Info -->
                    <div style="margin-bottom:16px;">
                        <span class="fclk-ts-period-btn" style="cursor:default; display:inline-block;">
                            <t t-esc="period_start.strftime('%b %d')"/> -
                            <t t-esc="period_end.strftime('%b %d, %Y')"/>
                            (<t t-esc="dict([('weekly','Weekly'),('biweekly','Bi-Weekly'),('semi_monthly','Semi-Monthly'),('monthly','Monthly')]).get(schedule_type, schedule_type)"/>)
                        </span>
                    </div>

                    <!-- Summary Cards -->
                    <div class="fclk-ts-summary">
                        <div class="fclk-ts-summary-card">
                            <div class="fclk-ts-summary-value"><t t-esc="total_hours"/>h</div>
                            <div class="fclk-ts-summary-label">Total Hours</div>
                        </div>
                        <div class="fclk-ts-summary-card">
                            <div class="fclk-ts-summary-value" style="color:#10B981;"><t t-esc="net_hours"/>h</div>
                            <div class="fclk-ts-summary-label">Net Hours</div>
                        </div>
                        <div class="fclk-ts-summary-card">
                            <div class="fclk-ts-summary-value"><t t-esc="int(total_breaks)"/>m</div>
                            <div class="fclk-ts-summary-label">Total Breaks</div>
                        </div>
                    </div>

                    <!-- Attendance Table -->
                    <t t-if="attendances">
                        <table class="fclk-ts-table">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>In</th>
                                    <th>Out</th>
                                    <th>Break</th>
                                    <th>Net</th>
                                    <th>Location</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <t t-foreach="attendances" t-as="entry">
                                    <tr>
                                        <td>
                                            <strong><t t-esc="entry['day_name']"/></strong>
                                            <span style="color:#9ca3af; margin-left:4px;">
                                                <t t-esc="entry['day_date']"/>
                                            </span>
                                        </td>
                                        <td><t t-esc="entry['time_in']"/></td>
                                        <td>
                                            <t t-if="entry['att'].check_out">
                                                <t t-esc="entry['time_out']"/>
                                                <t t-if="entry['att'].x_fclk_auto_clocked_out">
                                                    <span class="fclk-ts-badge-auto">AUTO</span>
                                                </t>
                                            </t>
                                            <t t-else="">
                                                <span style="color:#f59e0b;">Active</span>
                                            </t>
                                        </td>
                                        <td><t t-esc="int(entry['att'].x_fclk_break_minutes or 0)"/>m</td>
                                        <td style="font-weight:600; color:#10B981;">
                                            <t t-esc="'%.1f' % (entry['att'].x_fclk_net_hours or 0)"/>h
                                        </td>
                                        <td style="color:#9ca3af; font-size:12px;">
                                            <t t-esc="entry['att'].x_fclk_location_id.name or ''"/>
                                        </td>
                                        <td>
                                            <a href="#" class="fclk-correction-link"
                                               t-att-data-att-id="entry['att'].id"
                                               t-att-data-check-in="entry['att'].check_in.strftime('%Y-%m-%d %H:%M:%S') if entry['att'].check_in else ''"
                                               t-att-data-check-out="entry['att'].check_out.strftime('%Y-%m-%d %H:%M:%S') if entry['att'].check_out else ''"
                                               style="font-size:11px; color:#6b7280;">
                                                Correct
                                            </a>
                                        </td>
                                    </tr>
                                </t>
                            </tbody>
                        </table>
                    </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">
                                <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>
                            <p>No attendance records for this 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 fclk-nav-active">
                            <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">
                            <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>
