{% extends "shopyo_base/module_base.html" %}
{% set active_page ='page' %}

{% block pagehead %}
{{ super() }}
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet">
<title>Pages - Shopyo</title>
{% endblock %}

{% block sidebar %}
    {% include 'shopyo_page/blocks/sidebar.html' %}
{% endblock %}

{% block module_content %}
<div class="max-w-4xl mx-auto">
    <div class="card">
        <div class="card-body">
            <div class="flex justify-between items-center mb-8">
                <div>
                    <h3 class="text-xl font-black text-slate-900 dark:text-white uppercase tracking-tight">Create New Page</h3>
                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Publish content to your site</p>
                </div>
            </div>

            <form action="{{url_for('{}.check_pagecontent'.format(module_name))}}" method="POST" class="space-y-6">
                <input type="hidden" name="csrf_token" value="{{csrf_token()}}">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Title -->
                    <div class="space-y-1">
                        <label class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] px-1">Page Title</label>
                        <div class="relative group">
                            <i class="fa fa-heading absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs group-focus-within:text-primary transition-colors"></i>
                            {{ form.title(class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 pl-11 pr-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none", placeholder="My New Page", id="title") }}
                        </div>
                    </div>

                    <!-- Slug -->
                    <div class="space-y-1">
                        <label class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] px-1">URL Slug</label>
                        <div class="relative group">
                            <i class="fa fa-link absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs group-focus-within:text-primary transition-colors"></i>
                            {{ form.slug(class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 pl-11 pr-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none", placeholder="my-new-page", id="slug") }}
                        </div>
                    </div>
                </div>

                <!-- Template -->
                <div class="space-y-1">
                    <label class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] px-1">Custom Template (Optional)</label>
                    <div class="relative group">
                        <i class="fa fa-file-code absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs group-focus-within:text-primary transition-colors"></i>
                        {{ form.template(class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 pl-11 pr-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none", placeholder="e.g. blogus/landing.html") }}
                    </div>
                    <p class="text-[8px] font-bold text-slate-400 uppercase tracking-widest mt-1 ml-1">Leave empty to use theme's default. Example: <span class="text-primary">{{ shopyo_theme.get_active_front_theme() }}/landing.html</span></p>
                </div>

                <!-- Description -->
                <div class="space-y-1">
                    <label class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] px-1">Meta Description</label>
                    {{ form.meta_description(class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none", placeholder="SEO description...") }}
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Keywords -->
                    <div class="space-y-1">
                        <label class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] px-1">Meta Keywords</label>
                        {{ form.meta_keywords(class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none", placeholder="cms, flask, shopyo") }}
                    </div>

                    <!-- Language -->
                    <div class="space-y-1">
                        <label class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] px-1">Language</label>
                        {{ form.lang(class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none") }}
                    </div>
                </div>

                <!-- Content Editor -->
                <div class="space-y-3">
                    <label class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] px-1">Page Content</label>
                    <div class="hidden">
                        {{ form.content(id="content-textarea") }}
                    </div>
                    <div class="rounded-2xl border border-slate-200 dark:border-slate-700 overflow-hidden bg-white min-h-[400px] flex flex-col">
                        <div id="editor" class="flex-1 min-h-[350px] text-slate-900"></div>
                    </div>
                </div>

                <div class="pt-6">
                    <button type="submit" class="w-full bg-primary text-white font-black py-4 px-6 rounded-2xl hover:bg-primary-dark transition-all shadow-xl shadow-primary/20 active:scale-[0.98] text-xs uppercase tracking-[0.2em]">
                        Publish Page
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
<script>
  const quill = new Quill('#editor', {
    theme: 'snow',
    placeholder: 'Start writing your story...'
  });

  const textarea = document.getElementById('content-textarea');
  quill.on('text-change', function() {
    textarea.value = quill.root.innerHTML;
  });

  // Slug auto-generation (Vanilla JS)
  document.getElementById('title').addEventListener('input', function(e) {
      const slugInput = document.getElementById('slug');
      let val = e.target.value.toLowerCase()
          .trim()
          .replace(/[^\w\s-]/g, '')
          .replace(/[\s_-]+/g, '-')
          .replace(/^-+|-+$/g, '');
      slugInput.value = val;
  });
</script>
{% endblock %}