{% extends 'base.html' %}
{% load static %}

{% block title %}Site Report — {{ work_log.date|date:"d M Y" }} | FoxFitt{% endblock %}

{% block content %}
{% comment %}
Read-only display of a SiteReport. Reachable from:
  - The work-history page indicator (📋 icon next to a log)
  - Direct URL: /site-report/<work_log_id>/
Same permission scope as the edit view: admin OR supervisor of the
parent work log / project.

Designed to read well on a phone (column-stacked sections, compact
metric tables) AND on a desktop where someone reviewing weekly progress
might want to scan multiple at once.
{% endcomment %}

<div class="container py-4">

    {# === Page header === #}
    <div class="d-flex justify-content-between align-items-start gap-2 mb-3">
        <div>
            <h1 class="page-title mb-0">
                <i class="fas fa-clipboard-check me-2" style="color: var(--accent);"></i>
                Site Report
            </h1>
            <small class="text-muted">
                {{ work_log.project.name }} —
                {{ work_log.date|date:"l, d M Y" }}
                {% if work_log.team %}({{ work_log.team.name }}){% endif %}
            </small>
            {% if site_report.created_by %}
            <div class="text-muted" style="font-size: 0.8rem;">
                Logged by {{ site_report.created_by.get_full_name|default:site_report.created_by.username }}
                · {{ site_report.created_at|date:"d M Y, H:i" }}
                {% if site_report.updated_at and site_report.updated_at != site_report.created_at %}
                    · last edited {{ site_report.updated_at|date:"d M Y, H:i" }}
                {% endif %}
            </div>
            {% endif %}
        </div>
        <div class="d-flex gap-2">
            <a href="{% url 'site_report_edit' work_log.id %}" class="btn btn-outline-secondary btn-sm" title="Edit this report">
                <i class="fas fa-pen fa-sm me-1"></i> Edit
            </a>
            <a href="{% url 'work_history' %}" class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-arrow-left fa-sm me-1"></i> Back
            </a>
        </div>
    </div>

    <div class="card">
        <div class="card-body p-3 p-md-4">

            {# === Conditions === #}
            <h6 class="text-uppercase mb-2" style="font-size: 0.75rem; letter-spacing: 0.05em; color: var(--text-secondary);">
                Conditions
            </h6>
            <div class="row g-3 mb-4">
                <div class="col-12 col-md-6">
                    <strong>Weather:</strong>
                    {% if site_report.weather %}
                        {% if site_report.weather == 'sunny' %}☀️
                        {% elif site_report.weather == 'cloudy' %}☁️
                        {% elif site_report.weather == 'rain' %}🌧️
                        {% elif site_report.weather == 'storm' %}⛈️
                        {% elif site_report.weather == 'hot' %}🥵
                        {% elif site_report.weather == 'cold' %}🥶
                        {% elif site_report.weather == 'windy' %}💨
                        {% endif %}
                        {{ site_report.get_weather_display }}
                    {% else %}
                        <span class="text-muted">—</span>
                    {% endif %}
                </div>
                <div class="col-12 col-md-6">
                    <strong>Temperature:</strong>
                    {% if site_report.temperature_min is not None or site_report.temperature_max is not None %}
                        {% if site_report.temperature_min is not None %}{{ site_report.temperature_min }}°C{% else %}—{% endif %}
                        /
                        {% if site_report.temperature_max is not None %}{{ site_report.temperature_max }}°C{% else %}—{% endif %}
                    {% else %}
                        <span class="text-muted">not recorded</span>
                    {% endif %}
                </div>
            </div>

            {# === Counts === #}
            {% if counts_display %}
            <h6 class="text-uppercase mb-2" style="font-size: 0.75rem; letter-spacing: 0.05em; color: var(--text-secondary);">
                Counts
            </h6>
            <div class="row g-2 mb-4">
                {% for c in counts_display %}
                <div class="col-6 col-md-4">
                    <div class="card" style="background: var(--bg-card-hover); border: 1px solid rgba(255,255,255,0.05);">
                        <div class="card-body p-2 text-center">
                            <div style="font-size: 1.5rem; font-weight: 700; color: var(--accent);">
                                {{ c.value }}
                            </div>
                            <div class="text-muted" style="font-size: 0.75rem;">{{ c.label }}</div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% endif %}

            {# === Checks === #}
            {% if checks_display %}
            <h6 class="text-uppercase mb-2" style="font-size: 0.75rem; letter-spacing: 0.05em; color: var(--text-secondary);">
                Other
            </h6>
            <ul class="list-unstyled mb-4">
                {% for c in checks_display %}
                <li class="mb-1">
                    {% if c.value %}
                        <i class="fas fa-check-circle me-1" style="color: var(--badge-bonus-bg);"></i>
                    {% else %}
                        <i class="far fa-circle me-1 text-muted"></i>
                    {% endif %}
                    <span {% if not c.value %}class="text-muted"{% endif %}>{{ c.label }}</span>
                </li>
                {% endfor %}
            </ul>
            {% endif %}

            {# === Free-form notes === #}
            {% if site_report.notes %}
            <h6 class="text-uppercase mb-2" style="font-size: 0.75rem; letter-spacing: 0.05em; color: var(--text-secondary);">
                Notes
            </h6>
            <div class="mb-2" style="white-space: pre-wrap;">{{ site_report.notes }}</div>
            {% endif %}

        </div>
    </div>
</div>
{% endblock %}