{% extends "admin/base.html" %}

{% block title %}{{ t(key="edit-article", lang=lang | default(value='sk')) }}{% endblock title %}

{% block content %}
<h1>{{ t(key="edit-article", lang=lang | default(value='sk')) }}</h1>

<form method="post" action="/admin/blog/articles/{{ article.id }}">
  <label>
    {{ t(key="title", lang=lang | default(value='sk')) }}
    <input type="text" name="title" value="{{ article.title }}" required>
  </label>
  <label>
    {{ t(key="excerpt", lang=lang | default(value='sk')) }}
    <textarea name="excerpt" rows="4">{% if article.excerpt %}{{ article.excerpt }}{% endif %}</textarea>
  </label>
  <label>
    {{ t(key="content", lang=lang | default(value='sk')) }}
    <textarea name="content" rows="18" required>{{ article.content }}</textarea>
  </label>
  <label>
    {{ t(key="featured-image-id", lang=lang | default(value='sk')) }}
    <input type="text" name="featured_image_id" data-blog-image-id value="{% if article.featured_image_id %}{{ article.featured_image_id }}{% endif %}">
  </label>
  <div>
    <input type="file" accept="image/jpeg,image/png,image/webp,image/gif" data-blog-image-file class="file-input file-input-bordered">
    <button type="button" class="btn btn-outline btn-sm" data-blog-image-upload data-uploading="{{ t(key="image-uploading", lang=lang | default(value='sk')) }}" data-ready="{{ t(key="upload-featured-image", lang=lang | default(value='sk')) }}">{{ t(key="upload-featured-image", lang=lang | default(value='sk')) }}</button>
    <p class="text-sm opacity-70" data-blog-image-status>{{ t(key="image-upload-help", lang=lang | default(value='sk')) }}</p>
    <img data-blog-image-preview alt="" class="mt-2 max-h-48 rounded border border-base-300 object-cover" {% if article.featured_image_id %}src="/images/{{ article.featured_image_id }}"{% endif %} style="{% if not article.featured_image_id %}display: none;{% endif %}">
  </div>
  <label>
    <input type="checkbox" name="published" {% if article.published %}checked{% endif %}>
    {{ t(key="published", lang=lang | default(value='sk')) }}
  </label>
  <button type="submit">{{ t(key="save", lang=lang | default(value='sk')) }}</button>
</form>
<script>
  (function () {
    const fileInput = document.querySelector('[data-blog-image-file]');
    const idInput = document.querySelector('[data-blog-image-id]');
    const uploadButton = document.querySelector('[data-blog-image-upload]');
    const status = document.querySelector('[data-blog-image-status]');
    const preview = document.querySelector('[data-blog-image-preview]');
    if (!fileInput || !idInput || !uploadButton || !status || !preview) return;

    function setPreview(filename) {
      if (!filename) return;
      preview.src = '/images/' + filename;
      preview.style.display = '';
    }

    uploadButton.addEventListener('click', async function () {
      const file = fileInput.files && fileInput.files[0];
      if (!file) return;
      uploadButton.disabled = true;
      uploadButton.textContent = uploadButton.dataset.uploading;
      const formData = new FormData();
      formData.append('file', file);
      try {
        const response = await fetch('/images/upload', { method: 'POST', body: formData });
        if (!response.ok) throw new Error('upload failed');
        const result = await response.json();
        idInput.value = result.filename;
        setPreview(result.filename);
        status.textContent = '{{ t(key="image-uploaded", lang=lang | default(value='sk')) }}';
      } catch (_error) {
        status.textContent = '{{ t(key="image-upload-error", lang=lang | default(value='sk')) }}';
      } finally {
        uploadButton.disabled = false;
        uploadButton.textContent = uploadButton.dataset.ready;
      }
    });
  })();
</script>
{% endblock content %}