{% extends "base.html" %}
{% block body %}
<div class="mb-6 flex items-center justify-between">
  <div>
    <h1 class="text-3xl font-bold">{{ title }}</h1>
  </div>
  <a class="btn btn-outline" href="/sources">Назад</a>
</div>

<div class="card bg-base-100 shadow-sm border border-base-200 max-w-3xl">
  <div class="card-body">
    <form method="post" action="{{ action }}" class="flex flex-col gap-4">
      <input type="hidden" name="csrf_token" value="{{ user.csrf_token }}">
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="form-control">
          <label class="label"><span class="label-text font-bold">Площадка</span></label>
          <select name="platform" class="select select-bordered w-full">
            <option value="vk" {% if not source or source.platform == "vk" %}selected{% endif %}>VK</option>
            <option value="site" {% if source and source.platform == "site" %}selected{% endif %}>Сайт</option>
          </select>
        </div>
        
        <div class="form-control">
          <label class="label"><span class="label-text font-bold">Приоритет</span></label>
          <input name="priority" type="number" value="{{ source.priority if source else 100 }}" class="input input-bordered w-full">
        </div>
        
        <div class="form-control md:col-span-2">
          <label class="label"><span class="label-text font-bold">Название</span></label>
          <input name="name" value="{{ source.name if source else '' }}" required class="input input-bordered w-full">
        </div>
        
        <div class="form-control">
          <label class="label"><span class="label-text font-bold">Тэг</span></label>
          <input name="tag" value="{{ source.tag if source else '' }}" placeholder="academy_gear" class="input input-bordered w-full">
        </div>
        
        <div class="form-control md:col-span-2">
          <label class="label"><span class="label-text font-bold">Ссылка</span></label>
          <input name="url" value="{{ source.url if source else '' }}" required class="input input-bordered w-full text-primary">
        </div>

        <div id="site-config" class="form-control md:col-span-2">
          <label class="label"><span class="label-text font-bold">Конфигурация JSON</span></label>
          <textarea name="settings_json" rows="8" class="textarea textarea-bordered w-full font-mono" placeholder='{"format":"rss","access":"auto","max_items":20}'>{{ source.settings_json | tojson(indent=2) if source else '{}' }}</textarea>
          <details class="mt-2 text-sm text-base-content/70">
            <summary class="cursor-pointer">Пример и параметры</summary>
            <pre class="mt-2 p-3 bg-base-200 overflow-x-auto">{
  "format": "rss",
  "access": "auto",
  "max_items": 20
}</pre>
            <p class="mt-2"><code>access</code>: <code>auto</code> сначала пробует обычный запрос и при Cloudflare использует RuCaptcha; <code>http</code> запрещает браузер; <code>cloudflare</code> сразу запускает браузер.</p>
          </details>
        </div>
      </div>
      
      <div class="form-control mt-4">
        <label class="label cursor-pointer justify-start gap-3">
          <input name="active" type="checkbox" class="toggle toggle-primary" {% if not source or source.active %}checked{% endif %}>
          <span class="label-text font-bold">Активен (парсер будет собирать посты)</span>
        </label>
      </div>
      
      <div class="card-actions justify-end mt-4 pt-4 border-t border-base-200">
        <button class="btn btn-primary" type="submit">Сохранить</button>
      </div>
    </form>
  </div>
</div>
<script>
  const platform = document.querySelector('[name="platform"]');
  const siteConfig = document.getElementById('site-config');
  const configInput = document.querySelector('[name="settings_json"]');
  const syncConfig = () => {
    siteConfig.hidden = platform.value !== 'site';
    if (platform.value === 'site' && configInput.value.trim() === '{}') {
      configInput.value = '{\n  "format": "rss",\n  "access": "auto",\n  "max_items": 20\n}';
    }
  };
  platform.addEventListener('change', syncConfig);
  syncConfig();
</script>
{% endblock %}