{% extends "admin/base.html" %}
{% block page_title %}Тех карта: {{ product.name }}{% endblock %}
{% block content %}
<style>
  .tc-head { display: flex; align-items: center; gap: 14px; margin-top: 18px; margin-bottom: 18px; }
  .tc-head h1 { margin: 0 0 4px; }
  .tc-preview {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--panel-2);
    margin-bottom: 10px;
  }
  .tc-instructions { font-size: 14px; line-height: 1.6; resize: vertical; min-height: 220px; }
</style>

<a class="muted" style="font-size:12.5px;" href="{{ url_for('admin.tech_cards_list') }}">← До тех карт</a>

<div class="tc-head">
  {% if product.image_url %}
    <img class="thumb" src="{{ product.image_url }}" style="width:64px;height:64px;" alt="">
  {% else %}
    <div class="thumb" style="width:64px;height:64px;"></div>
  {% endif %}
  <div>
    <h1>📋 {{ product.name }}</h1>
    <div class="muted" style="font-size:12.5px;">{{ product.category.name }}{% if product.weight %} · {{ product.weight }}{% endif %} · {{ product.price }} грн</div>
  </div>
</div>

<div class="card" style="max-width:640px;margin:0 auto;">
  <form method="post" enctype="multipart/form-data">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

    <label>Фото подачі <span class="muted">(як страва має виглядати на видачі)</span></label>
    {% if card and card.photo_url %}
      <img class="tc-preview" src="{{ card.photo_url }}" alt="">
      <label style="display:flex;align-items:center;gap:8px;font-weight:400;margin-bottom:10px;">
        <input type="checkbox" name="remove_photo" class="admin-checkbox">
        Видалити фото (без заміни)
      </label>
    {% endif %}
    <input type="file" name="photo" accept="image/*">

    <label>Час приготування, хв</label>
    <input type="number" name="cook_time_min" min="0" value="{{ card.cook_time_min if card and card.cook_time_min else '' }}" placeholder="напр. 25">

    <label>Інструкція приготування</label>
    <textarea name="instructions" class="tc-instructions" rows="14" placeholder="1. Замаринувати...&#10;2. Обсмажити...&#10;3. Викласти на тарілку...">{{ card.instructions if card else '' }}</textarea>

    {% if card and card.updated_at %}
    <p class="muted field-hint" style="margin-top:-4px;">Востаннє оновлено: {{ card.updated_at.strftime('%d.%m.%Y %H:%M') }}</p>
    {% endif %}

    <div style="margin-top:16px;display:flex;gap:10px;">
      <button class="btn" type="submit">Зберегти</button>
      <a class="btn secondary" href="{{ url_for('admin.tech_cards_list') }}">Скасувати</a>
    </div>
  </form>

  {% if card %}
  <form method="post" action="{{ url_for('admin.tech_card_delete', product_id=product.id) }}" onsubmit="return confirm('Видалити тех карту?');" style="margin-top:20px;padding-top:16px;border-top:1px solid var(--border);">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <button class="btn small danger" type="submit">Видалити тех карту</button>
  </form>
  {% endif %}
</div>
{% endblock %}