{% extends "base.html" %}

{% block title %}{{ plant.name }}{% endblock %}

{% block content %}
<article class="max-w-4xl mx-auto bg-white p-8 rounded-2xl shadow-xl mt-8">
  <div class="flex flex-col md:flex-row gap-4 md:gap-6">
    <div class="md:w-1/2 flex-shrink-0 mb-6 md:mb-0">
      {% if plant.picture %}
        <img src="{{ url_for('static', filename='uploads/' ~ plant.picture) }}" alt="{{ plant.name }}" class="w-full h-96 object-cover rounded-xl shadow-md border-2 border-[#e6ebe0]">
      {% else %}
        <img src="{{ url_for('static', filename='images/placeholder-plant.svg') }}" alt="No image available" class="w-full h-96 object-cover rounded-xl shadow-md border-2 border-[#e6ebe0] opacity-50">
      {% endif %}
    </div>
    <div class="md:w-1/2 flex flex-col gap-4">
      <h1 class="text-4xl font-bold text-[#4e6b50] mb-2">{{ plant.name }}</h1>
      <div class="flex flex-wrap gap-2 mb-2">
        {% if plant.climate %}
          <span class="inline-flex items-center px-2 py-0.5 rounded bg-[#d0e7d2] text-[#3e5637] text-xs font-semibold">
            {% if plant.climate.icon %}<img src="{{ url_for('static', filename='icons/' ~ plant.climate.icon) }}" alt="Climate icon" class="w-4 h-4 mr-1 inline-block align-middle" />{% endif %}
            {{ plant.climate.name }}
          </span>
        {% endif %}
        {% if plant.environment %}
          <span class="inline-flex items-center px-2 py-0.5 rounded bg-[#d0e7d2] text-[#3e5637] text-xs font-semibold">
            {% if plant.environment.icon %}<img src="{{ url_for('static', filename='icons/' ~ plant.environment.icon) }}" alt="Environment icon" class="w-4 h-4 mr-1 inline-block align-middle" />{% endif %}
            {{ plant.environment.name }}
          </span>
        {% endif %}
        {% if plant.light %}
          <span class="inline-flex items-center px-2 py-0.5 rounded bg-[#e6ebe0] text-[#3e5637] text-xs font-semibold">
            {% if plant.light.icon %}<img src="{{ url_for('static', filename='icons/' ~ plant.light.icon) }}" alt="Light icon" class="w-4 h-4 mr-1 inline-block align-middle" />{% endif %}
            {{ plant.light.name }}
          </span>
        {% endif %}
        {% if plant.toxicity %}
          <span class="inline-flex items-center px-2 py-0.5 rounded bg-[#fff4e6] text-[#3e5637] text-xs font-semibold">
            {% if plant.toxicity.icon %}<img src="{{ url_for('static', filename='icons/' ~ plant.toxicity.icon) }}" alt="Toxicity icon" class="w-4 h-4 mr-1 inline-block align-middle" />{% endif %}
            {{ plant.toxicity.name }}
          </span>
        {% endif %}
        {% if plant.size %}
          <span class="inline-flex items-center px-2 py-0.5 rounded bg-[#e6f7f5] text-[#3e5637] text-xs font-semibold">
            {% if plant.size.icon %}<img src="{{ url_for('static', filename='icons/' ~ plant.size.icon) }}" alt="Size icon" class="w-4 h-4 mr-1 inline-block align-middle" />{% endif %}
            {{ plant.size.name }}
          </span>
        {% endif %}
        {% if plant.care_difficulty %}
          <span class="inline-flex items-center px-2 py-0.5 rounded bg-[#f3e6ff] text-[#3e5637] text-xs font-semibold">
            {% if plant.care_difficulty.icon %}<img src="{{ url_for('static', filename='icons/' ~ plant.care_difficulty.icon) }}" alt="Care icon" class="w-4 h-4 mr-1 inline-block align-middle" />{% endif %}
            {{ plant.care_difficulty.name }}
          </span>
        {% endif %}
        {% if plant.growth_rate %}
          <span class="inline-flex items-center px-2 py-0.5 rounded bg-[#f7fae6] text-[#3e5637] text-xs font-semibold">
            {% if plant.growth_rate.icon %}<img src="{{ url_for('static', filename='icons/' ~ plant.growth_rate.icon) }}" alt="Growth icon" class="w-4 h-4 mr-1 inline-block align-middle" />{% endif %}
            {{ plant.growth_rate.name }}
          </span>
        {% endif %}
      </div>
      <div class="prose max-w-none mb-4 text-[#4e6b50]">{{ plant.description|safe }}</div>
    </div>
  </div>
  {% if products %}
    <div class="mb-8 mt-4">
      <span class="font-semibold text-[#4e6b50]">Products:</span>
      <span class="flex flex-wrap gap-2 mt-1">
        {% for product in products %}
          <span class="inline-block bg-[#e6ebe0] text-[#3e5637] px-3 py-1 rounded text-xs font-semibold border border-[#d0e7d2]">{{ product.name }}</span>
        {% endfor %}
      </span>
    </div>
  {% endif %}
  {% if plant.care_guide %}
    <div class="mt-12">
      <h2 class="text-2xl font-bold text-[#6b8f71] mb-3">Care Guide</h2>
      <div class="prose max-w-none bg-[#f8f9fa] border border-[#e6ebe0] rounded-xl p-6 text-[#3e5637] shadow" style="min-height:80px;">
        {{ plant.care_guide|safe }}
      </div>
    </div>
  {% endif %}
  <div class="text-xs text-[#6b8f71] mt-8">Added on <span class="local-date" data-date="{{ plant.date_added.isoformat() }}"></span></div>
  <div class="mt-8 flex flex-wrap gap-4">
    <a href="{{ url_for('home', climate=plant.climate_id, environment=plant.environment_id) }}"
       class="inline-block bg-[#6b8f71] text-white hover:bg-[#4e6b50] font-semibold px-6 py-2 rounded-lg shadow transition-colors duration-200">
        🌱 View Similar Plants
    </a>
    <a href="{{ url_for('home') }}" class="inline-block bg-[#e6ebe0] text-[#3e5637] hover:bg-[#b7c7a3] hover:text-[#4e6b50] font-semibold px-6 py-2 rounded-lg shadow transition-colors duration-200">
        ← Back to Home
    </a>
  </div>
</article>
{% endblock %}