{% extends "admin/layout.html" %}
{% block content %}
<h2 class="text-xl font-bold text-slate-800 mb-4">Web Settings</h2>
<div class="bg-slate-50 rounded-xl p-5">
  <form method="POST">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
    <div class="grid grid-cols-1 grid-cols-2 gap-4">
      <div class="col-span-2">
        <label class="label-field">Title Web Site</label>
        <input class="input-field" value="{{ judul.judul }}" name="judul">
      </div>
      <div class="col-span-2">
        <label class="label-field">Website Description</label>
        <input class="input-field" value="{{ judul.deskripsi }}" name="deskripsi">
      </div>
      <div class="col-span-2">
        <label class="label-field">Hero Content</label>
        <input class="input-field" value="{{ judul.hero }}" name="hero">
      </div>
      <div>
        <label class="label-field">Sub Hero 1 Title</label>
        <input class="input-field" value="{{ judul.judulsh1 }}" name="judulsh1">
      </div>
      <div>
        <label class="label-field">Sub Hero 1 Content</label>
        <textarea class="input-field" name="isish1" rows="3">{{ judul.isish1 }}</textarea>
      </div>
      <div>
        <label class="label-field">Sub Hero 2 Title</label>
        <input class="input-field" value="{{ judul.judulsh2 }}" name="judulsh2">
      </div>
      <div>
        <label class="label-field">Sub Hero 2 Content</label>
        <textarea class="input-field" name="isish2" rows="3">{{ judul.isish2 }}</textarea>
      </div>
      <div>
        <label class="label-field">Sub Hero 3 Title</label>
        <input class="input-field" value="{{ judul.judulsh3 }}" name="judulsh3">
      </div>
      <div>
        <label class="label-field">Sub Hero 3 Content</label>
        <textarea class="input-field" name="isish3" rows="3">{{ judul.isish3 }}</textarea>
      </div>
      <div class="col-span-2">
        <label class="label-field">Footer 1</label>
        <textarea class="input-field" name="footer1" rows="3">{{ judul.footer1 }}</textarea>
      </div>
      <div>
        <label class="label-field">Footer 2</label>
        <input class="input-field" value="{{ judul.footer2 }}" name="footer2">
      </div>
      <div>
        <label class="label-field">Header</label>
        <input class="input-field" value="{{ judul.header }}" name="header">
      </div>
      <div class="col-span-2">
        <label class="label-field">Gemini API Key</label>
        <input class="input-field" type="password" name="gemini_api_key" placeholder="Enter Gemini API key (leave blank = unchanged)" autocomplete="off">
        <p class="text-xs text-slate-400 mt-1">Used for the <strong>Generate AI</strong> feature. The Generate AI button only appears when the API key is filled. Leave blank if you don't want to change the already saved key.{% if gemini_ada %} <span class="text-green-600">Status: key already saved.</span>{% endif %}</p>
      </div>
      <div class="col-span-2">
        <label class="label-field">Template Theme</label>
        <select class="input-field" name="tema">
          <option value="biru" {% if judul.tema == 'biru' %}selected{% endif %}>Blue</option>
          <option value="tosca" {% if judul.tema == 'tosca' %}selected{% endif %}>Teal</option>
          <option value="maroon" {% if judul.tema == 'maroon' %}selected{% endif %}>Maroon</option>
          <option value="unggu" {% if judul.tema == 'unggu' %}selected{% endif %}>Purple</option>
        </select>
        <p class="text-xs text-slate-400 mt-1">Choose the color template used across the website. Default is Blue.</p>
      </div>
    </div>
    <div class="mt-5">
      <button type="submit" class="btn-primary">Save</button>
    </div>
  </form>
</div>
{% endblock content %}