{% extends "journal/base.html" %}
{% block title %}{{ the_date|date:"Y-m-d" }} — Setup Log Pro{% endblock %}
{% block content %}
<p>
  <a href="{% url 'calendar_view_month' the_date.year the_date.month %}">&larr; Calendar</a>
  &nbsp;|&nbsp;
  <a href="{% url 'day_view' prev_date|date:'Y-m-d' %}{% if selected_portfolio %}?portfolio={{ selected_portfolio }}{% endif %}">&larr; {{ prev_date|date:"M j" }}</a>
  &nbsp;|&nbsp;
  <a href="{% url 'day_view' next_date|date:'Y-m-d' %}{% if selected_portfolio %}?portfolio={{ selected_portfolio }}{% endif %}">{{ next_date|date:"M j" }} &rarr;</a>
</p>
<h1>{{ the_date|date:"l, F j, Y" }}</h1>

<form method="get" style="margin-bottom:1rem;">
  <label style="font-size:0.8rem; opacity:0.8;">Portfolio
    <select name="portfolio" id="portfolio-select" onchange="syncPortfolioColor(this); this.form.submit()">
      <option value="" data-color="#F59E0B" style="background-color:var(--surface); color:#fff;" {% if selected_portfolio == "" %}selected{% endif %}>All portfolios</option>
      <option value="none" data-color="#8FA0BE" style="background-color:var(--surface); color:#fff;" {% if selected_portfolio == "none" %}selected{% endif %}>Unassigned</option>
      {% for p in portfolio_choices %}
      <option value="{{ p.id }}" data-color="{{ p.display_color }}" style="background-color:{{ p.display_color }}; color:#fff;" {% if selected_portfolio == p.id|stringformat:"s" %}selected{% endif %}>{{ p.name }}</option>
      {% endfor %}
    </select>
  </label>
</form>
<script>syncPortfolioColor(document.getElementById("portfolio-select"));</script>

<div class="summary">
  <div>Total P&amp;L <b class="{% if total_pnl > 0 %}win{% elif total_pnl < 0 %}loss{% endif %}">${{ total_pnl|floatformat:2 }}</b></div>
  <div>Total R <b class="{% if total_r > 0 %}win{% elif total_r < 0 %}loss{% endif %}">{{ total_r|floatformat:2 }}R</b></div>
  <div>Avg R <b class="{% if avg_r > 0 %}win{% elif avg_r < 0 %}loss{% endif %}">{% if avg_r is not None %}{{ avg_r|floatformat:2 }}R{% else %}—{% endif %}</b></div>
  <div>Trades <b>{{ trades|length }}</b></div>
</div>

<h2>Day comment</h2>
{% if can_edit_comment %}
<form method="post">
  {% csrf_token %}
  <input type="hidden" name="portfolio" value="{{ selected_portfolio }}">
  <textarea name="comment" rows="3" style="width:100%; max-width:600px;">{{ comment }}</textarea>
  <div style="margin-top:0.5rem;"><button type="submit">Save comment</button></div>
</form>
{% else %}
  {% if notes_for_display %}
    {% for n in notes_for_display %}
    <p><b>{{ n.label }}:</b> {{ n.comment }}</p>
    {% endfor %}
  {% else %}
    <p style="opacity:0.7;">No comments yet for this day.</p>
  {% endif %}
  <p style="opacity:0.65; font-size:0.85rem;">Select a specific portfolio (or Unassigned) above to add or edit a comment.</p>
{% endif %}

<h2>Trades</h2>
<table style="table-layout: fixed;">
  <colgroup>
    <col style="width: 7%;"><col style="width: 8%;"><col style="width: 6%;">
    <col style="width: 7%;"><col style="width: 6%;"><col style="width: 7%;">
    <col style="width: 10%;"><col style="width: 10%;"><col style="width: 9%;">
    <col style="width: 30%;">
  </colgroup>
  <thead>
    <tr>
      <th>Time</th><th>Symbol</th><th>Dir</th>
      <th>P&amp;L</th><th>R</th><th>Outcome</th><th>Setup</th><th>Mistake</th><th>Custom</th><th>Comment</th>
    </tr>
  </thead>
  <tbody>
    {% for trade in trades %}
    <tr>
      <td><a href="{% url 'trade_detail' trade.pk %}?next={{ request.get_full_path|urlencode }}">{{ trade.entry_time|date:"H:i:s" }}</a></td>
      <td>{{ trade.symbol }}</td>
      <td>{{ trade.direction }}</td>
      <td>{% if trade.pnl is not None %}${{ trade.pnl }}{% else %}—{% endif %}</td>
      <td>{% if trade.r_value is not None %}{{ trade.r_value|floatformat:2 }}R{% else %}—{% endif %}</td>
      <td>
        {% if trade.is_open %}<span class="open">OPEN</span>
        {% elif trade.effective_outcome == "WIN" %}<span class="win">WIN</span>
        {% elif trade.effective_outcome == "LOSS" %}<span class="loss">LOSS</span>
        {% else %}<span class="breakeven">B/E</span>{% endif %}
      </td>
      <td class="tags-cell">{% for tag in trade.setup_tags %}<span{% if tag.color %} style="background-color:{{ tag.color }}; color:#fff;"{% endif %}>{{ tag.name }}</span>{% endfor %}</td>
      <td class="tags-cell">{% for tag in trade.mistake_tags %}<span{% if tag.color %} style="background-color:{{ tag.color }}; color:#fff;"{% endif %}>{{ tag.name }}</span>{% endfor %}</td>
      <td class="tags-cell">{% for tag in trade.custom_tags %}<span{% if tag.color %} style="background-color:{{ tag.color }}; color:#fff;"{% endif %}>{{ tag.name }}</span>{% endfor %}</td>
      <td style="white-space:normal; word-wrap:break-word;">{{ trade.comment|default:"—" }}</td>
    </tr>
    {% empty %}
    <tr><td colspan="10">No trades on this day.</td></tr>
    {% endfor %}
  </tbody>
</table>
{% endblock %}