{% extends "plants/base.html" %}
{% block title %}Diagnosis {{ diagnosis.plant.name }}{% endblock %}
{% block content %}
{% with out=diagnosis.output %}
<div class="head">
  <div><h1>{{ diagnosis.plant.name }}: diagnosis</h1>
  <p class="muted">{{ diagnosis.created_at|date:"M j, Y H:i" }} <span class="badge {% if diagnosis.mode == 'ai' %}ok{% else %}warn{% endif %}">{{ diagnosis.get_mode_display }}</span>
    {% if out.urgency %}<span class="badge urgency-{{ out.urgency }}">{{ out.urgency }} urgency</span>{% endif %}</p></div>
  <a class="btn ghost" href="{% url 'plant_detail' diagnosis.plant_id %}">Back to plant</a>
</div>
{% if diagnosis.notice %}<div class="flash warning">{{ diagnosis.notice }}</div>{% endif %}
<div class="grid two">
  <section class="card">
    {% if diagnosis.photo %}<img class="photo" src="{{ diagnosis.photo.url }}" alt="Photo of {{ diagnosis.plant.name }}">{% endif %}
    <p><strong>Symptoms:</strong> {{ symptom_labels|join:", "|default:"none ticked" }}</p>
    {% if diagnosis.color_stats %}<p class="muted">Foliage colors: {{ diagnosis.color_stats.green_ratio|floatformat:2 }} green / {{ diagnosis.color_stats.yellow_ratio|floatformat:2 }} yellow / {{ diagnosis.color_stats.brown_ratio|floatformat:2 }} brown (share of 1.0)</p>{% endif %}
    {% if out.is_plant_identified %}<p><strong>Identified as:</strong> {{ out.species_guess }}</p>{% endif %}
    {% if usage %}<p class="muted">{% if usage.cached %}Cached response, no tokens used.{% else %}{{ usage.input_tokens }} in / {{ usage.output_tokens }} out tokens, about ${{ usage.cost_usd|floatformat:5 }}.{% endif %}</p>{% endif %}
  </section>
  <section class="card">
    <h2>Likely causes</h2>
    {% for c in out.causes %}
    <div class="cause">
      <div class="cause-head"><strong>{{ forloop.counter }}. {{ c.name }}</strong><span>{% widthratio c.confidence 1 100 %}%</span></div>
      <div class="bar"><span style="width: {% widthratio c.confidence 1 100 %}%"></span></div>
      <p>{{ c.evidence }}</p>
      <p class="muted"><strong>To confirm:</strong> {{ c.how_to_confirm }}</p>
    </div>
    {% empty %}<p class="muted">No cause could be ranked. Tick the symptoms you can see and try again.</p>{% endfor %}
  </section>
</div>
<div class="grid two">
  <section class="card">
    <h2>Treatment plan</h2>
    <ol>{% for s in out.treatment_steps %}<li>{{ s }}</li>{% empty %}<li class="muted">No steps.</li>{% endfor %}</ol>
    <h3>Follow-ups created</h3>
    <ul class="tasks">{% include "plants/_tasks.html" with tasks=tasks empty="None." %}</ul>
  </section>
  <section class="card">
    <h2>Did it recover?</h2>
    <form method="post" class="form">{% csrf_token %}
      {{ form.as_div }}
      <button class="btn">Save outcome</button>
    </form>
  </section>
</div>
{% endwith %}
{% endblock %}