{# Copyright (c) 2025-2026 马建军. All rights reserved. 专有软件，详见 LICENSE.zh-CN.txt #}
{% extends "base.html" %}
{% block title %}交易日历 - 国内期货 · 交易复盘系统{% endblock %}
{% block extra_css %}
<style>
.trade-cal-page .trade-cal-card{margin-bottom:0}
.trade-cal-head{
    display:flex;align-items:center;justify-content:space-between;gap:.75rem;
    flex-wrap:wrap;margin-bottom:.85rem;
}
.trade-cal-head h2{margin:0}
.trade-cal-nav{display:flex;align-items:center;gap:.5rem}
.trade-cal-nav button{
    border:1px solid var(--card-border);background:var(--card-inner);color:var(--text-title);
    border-radius:8px;padding:.35rem .65rem;cursor:pointer;font:inherit;font-size:.85rem;
}
.trade-cal-nav button:hover{border-color:var(--accent)}
.trade-cal-title{font-size:1rem;font-weight:600;color:var(--text-title);min-width:10rem;text-align:center;line-height:1.35}
.trade-cal-weekdays{
    display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;margin-bottom:.4rem;
}
.trade-cal-weekdays span{
    text-align:center;font-size:.78rem;color:var(--text-muted);padding:.2rem 0;
}
.trade-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem}
.trade-cal-cell{
    min-height:5.1rem;border:1px solid var(--card-border);border-radius:10px;
    background:var(--card-inner);padding:.42rem .48rem;text-align:left;cursor:default;
    transition:border-color .2s,box-shadow .2s;
}
.trade-cal-cell.is-empty{background:transparent;border-color:transparent}
.trade-cal-cell.is-clickable{cursor:pointer}
.trade-cal-cell.is-clickable:hover{border-color:var(--accent)}
.trade-cal-cell.is-selected{
    border-color:var(--accent);box-shadow:0 0 0 1px rgba(56,189,248,.25);
}
.trade-cal-cell.is-today .trade-cal-day-solar{color:var(--accent);font-weight:700}
.trade-cal-cell.is-emotion{
    border-color:rgba(251,146,60,.65);
    background:linear-gradient(145deg,rgba(251,146,60,.12),var(--card-inner));
}
.trade-cal-cell.is-emotion.is-selected{
    border-color:rgba(251,146,60,.9);
    box-shadow:0 0 0 1px rgba(251,146,60,.35);
}
.trade-cal-day-head{
    display:flex;align-items:baseline;justify-content:space-between;gap:.3rem;line-height:1.25;
}
.trade-cal-day-solar{font-size:.95rem;font-weight:600;color:var(--text-title)}
.trade-cal-day-lunar{
    font-size:.72rem;color:var(--text-muted);white-space:nowrap;flex-shrink:0;
}
.trade-cal-day-lunar.is-month-start{color:#c4a35a;font-weight:600;font-size:.74rem}
.trade-cal-cell.is-today .trade-cal-day-lunar{color:var(--accent);opacity:.85}
.trade-cal-meta{margin-top:.25rem;font-size:.72rem;line-height:1.4;color:var(--text-muted)}
.trade-cal-count{font-variant-numeric:tabular-nums}
.trade-cal-pnl{font-weight:600;font-size:.76rem;font-variant-numeric:tabular-nums;margin-top:.1rem}
.trade-cal-pnl.is-profit{color:var(--profit)}
.trade-cal-pnl.is-loss{color:var(--loss)}
.trade-cal-emotion{
    display:inline-block;margin-top:.14rem;padding:.06rem .32rem;border-radius:4px;
    font-size:.65rem;font-weight:600;color:#fb923c;background:rgba(251,146,60,.15);
}
.trade-cal-day-detail{margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--table-border)}
.trade-cal-day-detail-head{
    display:flex;align-items:center;justify-content:space-between;gap:.75rem;
    flex-wrap:wrap;margin-bottom:.65rem;
}
.trade-cal-day-detail-head h3{margin:0;font-size:.95rem}
.trade-cal-day-summary{font-size:.78rem;color:var(--text-muted)}
.trade-cal-day-list{display:flex;flex-direction:column;gap:.55rem}
.trade-cal-day-item{
    border:1px solid var(--card-border);border-radius:12px;background:var(--card-inner);
    padding:.65rem .75rem;
}
.trade-cal-day-item.is-emotion{
    border-color:rgba(251,146,60,.55);
    background:linear-gradient(145deg,rgba(251,146,60,.1),var(--card-inner));
}
.trade-cal-day-item-head{
    display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.35rem;
}
.trade-cal-day-item-symbol{font-weight:600;font-size:.88rem;color:var(--text-title)}
.trade-cal-day-item-pnl{font-weight:600;font-size:.88rem;font-variant-numeric:tabular-nums}
.trade-cal-day-item-pnl.is-profit{color:var(--profit)}
.trade-cal-day-item-pnl.is-loss{color:var(--loss)}
.trade-cal-day-item-meta{
    display:flex;flex-wrap:wrap;gap:.35rem .55rem;font-size:.72rem;color:var(--text-muted);
}
.trade-cal-badge{
    display:inline-block;padding:.08rem .35rem;border-radius:4px;font-size:.65rem;font-weight:600;
}
.trade-cal-badge.review{background:rgba(56,189,248,.15);color:var(--accent)}
.trade-cal-badge.emotion{background:rgba(251,146,60,.18);color:#fb923c}
.trade-cal-day-item-notes{
    margin-top:.4rem;font-size:.72rem;color:var(--text-muted);line-height:1.45;
}
.trade-cal-day-item-shot{margin-top:.45rem}
.trade-cal-day-item-shot img{
    max-width:100%;max-height:180px;border-radius:8px;border:1px solid var(--card-border);
}
@media (min-width:768px){
    .trade-cal-cell{min-height:5.6rem;padding:.5rem .55rem}
    .trade-cal-day-solar{font-size:1.05rem}
    .trade-cal-day-lunar{font-size:.78rem}
    .trade-cal-day-lunar.is-month-start{font-size:.8rem}
    .trade-cal-meta{font-size:.76rem}
    .trade-cal-pnl{font-size:.8rem}
    .trade-cal-weekdays span{font-size:.82rem}
}
</style>
{% endblock %}
{% block content %}

<div class="trade-cal-page">
<div class="card trade-cal-card">
    <div class="trade-cal-head">
        <h2>交易日历</h2>
        <div class="trade-cal-nav">
            <button type="button" id="trade-cal-prev" aria-label="上个月">‹</button>
            <span class="trade-cal-title" id="trade-cal-title">—</span>
            <button type="button" id="trade-cal-next" aria-label="下个月">›</button>
            <button type="button" id="trade-cal-today">本月</button>
        </div>
    </div>
    <p class="hint" style="margin:0 0 .75rem">公历与农历对照；按平仓日汇总笔数与净盈亏。橙色日期含情绪单复盘，点击日期查看当日记录（已复盘优先）。</p>
    <div class="trade-cal-weekdays">
        <span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span><span>日</span>
    </div>
    <div class="trade-cal-grid" id="trade-cal-grid">
        <div class="text-muted" style="grid-column:1/-1;padding:.5rem 0">加载日历…</div>
    </div>
    <div class="trade-cal-day-detail" id="trade-cal-day-detail" hidden>
        <div class="trade-cal-day-detail-head">
            <h3 id="trade-cal-day-detail-title">当日交易</h3>
            <span class="trade-cal-day-summary" id="trade-cal-day-summary"></span>
        </div>
        <div class="trade-cal-day-list" id="trade-cal-day-list"></div>
    </div>
</div>
</div>

{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/lunar.js') }}"></script>
<script src="{{ url_for('static', filename='js/calendar.js') }}"></script>
{% endblock %}