{% extends "dashboard/base.html" %}
{% load static %}

{% block title %}{% if bulletin %}{{ bulletin.title }} — {% endif %}{{ title }}{% endblock %}

{% block content %}
<div class="report-container">

  {% if logo_url %}
  <div class="report-watermark">
    <img src="{{ logo_url }}" alt="">
  </div>
  {% endif %}

  <div class="report-top-bars"><span></span><span></span><span></span></div>

  {% if not bulletin %}
  <div class="report-body" style="text-align:center; padding: 80px 36px;">
    <h2 style="color:var(--report-charcoal); margin-bottom:8px;">No Bulletin Available</h2>
    <p style="color:var(--report-text-light); margin-bottom:24px;">No bulletin has been configured yet. Admins can create one from the CMS.</p>
    <a href="/" class="back-link">&larr; Back to Dashboard</a>
  </div>

  {% elif needs_login %}
  <div class="report-header">
    {% if organization %}
    <div class="org-badge">
      {% if logo_url %}<img src="{{ logo_url }}" alt="">{% endif %}
      {{ organization }}
    </div>
    {% endif %}
    <h1>{{ bulletin.title }}</h1>
  </div>
  <div class="report-body">
    <div class="login-box">
      <h2>&#128274; Authentication Required</h2>
      <p>This bulletin requires authentication.
        {% if organization %}Sign in with your {{ organization }} credentials to continue.{% endif %}
      </p>
      {% if login_error %}
      <div class="login-error" data-testid="text-login-error">{{ login_error }}</div>
      {% endif %}
      <form method="post" action="/bulletin/login/">
        {% csrf_token %}
        <div class="form-group">
          <div class="report-label">Username</div>
          <input type="text" name="username" required data-testid="input-username" placeholder="Enter username">
        </div>
        <div class="form-group">
          <div class="report-label">Password</div>
          <input type="password" name="password" required data-testid="input-password" placeholder="Enter password">
        </div>
        <button type="submit" data-testid="btn-login">Sign In</button>
      </form>
      <a href="/" class="back-link">&larr; Back to Dashboard</a>
    </div>
  </div>

  {% else %}
  <div class="report-header">
    <div style="display:flex; justify-content:space-between; align-items:flex-start;">
      <a href="/" class="back-link" style="margin-top:0;">&larr; Dashboard</a>
      <div style="flex:1; text-align:center;">
        {% if organization %}
        <div class="org-badge">
          {% if logo_url %}<img src="{{ logo_url }}" alt="">{% endif %}
          {{ bulletin.get_bulletin_type_display }}
        </div>
        {% endif %}
        <h1 data-testid="text-bulletin-title">{{ bulletin.title }}</h1>
        {% if bulletin.subtitle %}<p class="report-subtitle">{{ bulletin.subtitle }}</p>{% endif %}
      </div>
      <div style="width:80px;"></div>
    </div>

    {% if bulletin.issued_date or bulletin.valid_until %}
    <div class="report-meta">
      {% if bulletin.issued_date %}
      <div class="meta-item" data-testid="text-issued-date">
        &#128197; Issued: {{ bulletin.issued_date }}
      </div>
      {% endif %}
      {% if bulletin.valid_until %}
      <div class="meta-item" data-testid="text-valid-until">
        &#128197; Valid until: {{ bulletin.valid_until }}
      </div>
      {% endif %}
    </div>
    {% endif %}
  </div>

  <div class="report-body">

    {% for section in before_sections %}
    <div class="report-widget">
      <div class="report-widget-header">
        <h3>{{ section.heading }}</h3>
      </div>
      <div class="report-widget-content rich-text" style="padding:12px 16px;">
        {{ section.content|safe }}
      </div>
    </div>
    {% endfor %}

    {% if bulletin.summary %}
    <div class="report-widget">
      <div class="report-widget-header">
        <h3>Executive Summary</h3>
      </div>
      <div class="report-widget-content rich-text" style="padding:12px 16px;" data-testid="text-summary">
        {{ bulletin.summary|safe }}
      </div>
    </div>
    {% endif %}

    {% for section in after_metrics_sections %}
    <div class="report-widget">
      <div class="report-widget-header">
        <h3>{{ section.heading }}</h3>
      </div>
      <div class="report-widget-content rich-text" style="padding:12px 16px;">
        {{ section.content|safe }}
      </div>
    </div>
    {% endfor %}

    {% if expert_comments %}
    <div class="report-widget">
      <div class="report-widget-header">
        <h3>Expert Commentary</h3>
        <p>{{ expert_comments|length }} specialist{{ expert_comments|length|pluralize }}</p>
      </div>
      <div class="report-widget-content">
        <div style="display:grid; gap:12px; padding:8px;">
          {% for ec in expert_comments %}
          <div class="report-expert-card" data-testid="card-expert-{{ forloop.counter0 }}">
            <div class="expert-role">{{ ec.get_role_display }}</div>
            {% if ec.expert_name %}
            <div class="expert-name">{{ ec.expert_name }}{% if ec.expert_title %}, {{ ec.expert_title }}{% endif %}</div>
            {% endif %}
            <div class="expert-comment rich-text">{{ ec.comment|safe }}</div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
    {% endif %}

    {% for section in after_maps_sections %}
    <div class="report-widget">
      <div class="report-widget-header">
        <h3>{{ section.heading }}</h3>
      </div>
      <div class="report-widget-content rich-text" style="padding:12px 16px;">
        {{ section.content|safe }}
      </div>
    </div>
    {% endfor %}

    {% if bulletin.outlook %}
    <div class="report-widget">
      <div class="report-widget-header">
        <h3>Forecast Outlook</h3>
      </div>
      <div class="report-widget-content rich-text" style="padding:12px 16px;" data-testid="text-outlook">
        {{ bulletin.outlook|safe }}
      </div>
    </div>
    {% endif %}

    {% if bulletin.recommendations %}
    <div class="report-widget">
      <div class="report-widget-header">
        <h3>Recommendations</h3>
      </div>
      <div class="report-widget-content rich-text" style="padding:12px 16px;" data-testid="text-recommendations">
        {{ bulletin.recommendations|safe }}
      </div>
    </div>
    {% endif %}

    {% for section in after_report_sections %}
    <div class="report-widget">
      <div class="report-widget-header">
        <h3>{{ section.heading }}</h3>
      </div>
      <div class="report-widget-content rich-text" style="padding:12px 16px;">
        {{ section.content|safe }}
      </div>
    </div>
    {% endfor %}

  </div>

  <div class="report-footer">
    <div class="report-footer-content">
      <div>
        {% if organization %}<h4>{{ organization }}</h4>{% endif %}
      </div>
      <a href="/" class="back-link" style="color:#aaa;">&larr; Return to Dashboard</a>
    </div>
  </div>
  {% endif %}

</div>
{% endblock %}