natureinpots_community/plugins/plant/templates/plant/detail.html

{% extends 'core_ui/base.html' %}
{% block title %}
  {{ plant.common_name.name if plant.common_name else "Unnamed Plant" }} – Nature In Pots
{% endblock %}

{% block content %}
  <!-- Prev/Next Navigation -->
  <div class="d-flex justify-content-between mb-3">
    {% if prev_uuid %}
      <a href="{{ url_for('plant.detail', uuid_val=prev_uuid) }}" class="btn btn-outline-primary">&larr; Previous</a>
    {% else %}
      <div></div>
    {% endif %}
    {% if next_uuid %}
      <a href="{{ url_for('plant.detail', uuid_val=next_uuid) }}" class="btn btn-outline-primary">Next &rarr;</a>
    {% else %}
      <div></div>
    {% endif %}
  </div>

  <div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h2 class="mb-0">
        {{ plant.common_name.name if plant.common_name else "Unnamed Plant" }}
        <small class="text-muted">({{ plant.uuid }})</small>
      </h2>
      {% if current_user.id == plant.owner_id %}
        <a href="{{ url_for('plant.edit', uuid_val=plant.uuid) }}"
           class="btn btn-sm btn-outline-secondary">Edit</a>
      {% endif %}
    </div>
    <div class="card-body">
      <dl class="row">
        <dt class="col-sm-3">Type</dt>
        <dd class="col-sm-9">{{ plant.plant_type }}</dd>

        <dt class="col-sm-3">Scientific Name</dt>
        <dd class="col-sm-9">{{ plant.scientific_name.name }}</dd>

        <dt class="col-sm-3">Mother UUID</dt>
        <dd class="col-sm-9">
          {% if plant.mother_uuid %}
            <a href="{{ url_for('plant.detail', uuid_val=plant.mother_uuid) }}">
              {{ plant.mother_uuid }}
            </a>
          {% else %}
            N/A
          {% endif %}
        </dd>

        <dt class="col-sm-3">Notes</dt>
        <dd class="col-sm-9">{{ plant.notes or '—' }}</dd>
      </dl>

      <div class="mb-3">
        <a href="{{ url_for('utility.download_qr', uuid_val=plant.uuid) }}"
           class="btn btn-primary me-1">Direct QR</a>
        <a href="{{ url_for('utility.download_qr_card', uuid_val=plant.uuid) }}"
           class="btn btn-secondary">Card QR</a>
      </div>

      {% if plant.media %}
        <h5>Images</h5>
        <div class="row g-2">
          {% for m in plant.media %}
            <div class="col-6 col-md-3">
              <a href="{{ generate_image_url(m) }}" target="_blank" rel="noopener">
                <img
                  src="{{ generate_image_url(m) }}"
                  class="img-fluid"
                  style="width:100%; height:150px; object-fit:cover;"
                  alt="{{ m.filename }}"
                >
              </a>
            </div>
          {% endfor %}
        </div>
      {% else %}
        <p class="text-muted">No images uploaded yet.</p>
      {% endif %}

      {% if current_user.id == plant.owner_id %}
        <hr>
        <h5>Generate Cuttings</h5>
        <form
          method="POST"
          action="{{ url_for('plant.generate_children', uuid_val=plant.uuid) }}"
          class="row g-2 align-items-end"
        >
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <div class="col-auto">
            <label for="count" class="form-label">Number to generate</label>
            <input
              type="number"
              id="count"
              name="count"
              class="form-control"
              value="1"
              min="1" max="100"
            >
          </div>
          <div class="col-auto">
            <button type="submit" class="btn btn-success">Generate</button>
          </div>
        </form>

        {% if children %}
          <hr>
          <h5>Child Plants</h5>

          {% if children|length > 6 %}
            <ul class="list-group">
              {% for c in children %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                  <a href="{{ url_for('plant.detail', uuid_val=c.uuid) }}">
                    {{ c.common_name.name }} <small class="text-muted">({{ c.uuid }})</small>
                  </a>
                  <div>
                    <a href="{{ url_for('utility.download_qr', uuid_val=c.uuid) }}"
                       class="btn btn-sm btn-outline-primary me-1">Direct QR</a>
                    <a href="{{ url_for('utility.download_qr_card', uuid_val=c.uuid) }}"
                       class="btn btn-sm btn-outline-secondary">Card QR</a>
                  </div>
                </li>
              {% endfor %}
            </ul>
          {% else %}
            <div class="row g-3">
              {% for c in children %}
                <div class="col-12 col-md-6">
                  <div class="card h-100">
                    <div class="d-flex justify-content-center align-items-center p-3">
                      {% if c.media %}
                        {% set first_media = c.media[0] %}
                        <a href="{{ generate_image_url(first_media) }}"
                           target="_blank" rel="noopener">
                          <img
                            src="{{ generate_image_url(first_media) }}"
                            style="width:150px; height:150px; object-fit:cover;"
                            alt="{{ first_media.filename }}"
                          >
                        </a>
                      {% else %}
                        <div style="width:150px; height:150px; background:#f0f0f0;"></div>
                      {% endif %}
                    </div>
                    <div class="card-body text-center">
                      <h6 class="card-title">
                        <a href="{{ url_for('plant.detail', uuid_val=c.uuid) }}">
                          {{ c.common_name.name }}
                        </a>
                      </h6>
                      <p class="card-subtitle mb-2 text-muted">
                        <a href="{{ url_for('plant.detail', uuid_val=c.uuid) }}">
                          {{ c.uuid }}
                        </a>
                      </p>
                    </div>
                    <div class="card-footer text-center">
                      <a href="{{ url_for('utility.download_qr', uuid_val=c.uuid) }}"
                         class="btn btn-sm btn-outline-primary me-1">Direct QR</a>
                      <a href="{{ url_for('utility.download_qr_card', uuid_val=c.uuid) }}"
                         class="btn btn-sm btn-outline-secondary">Card QR</a>
                    </div>
                  </div>
                </div>
              {% endfor %}
            </div>
          {% endif %}
        {% endif %}
      {% endif %}
    </div>
  </div>

  <a href="{{ url_for('plant.index') }}" class="btn btn-link">&larr; Back to list</a>
{% endblock %}