{% extends "adminpanel/base.html" %}
{% block title %}{% if website %}Edit {{ website.name }}{% else %}Add website{% endif %} — admin{% endblock %}
{% block heading %}{% if website %}Edit website{% else %}Add website{% endif %}{% endblock %}

{% block content %}
<div class="pane" style="max-width:900px">
  <a class="back" href="{% if website %}{% url 'admin_website' website.slug %}{% else %}{% url 'admin_websites' %}{% endif %}">&larr; Back</a>

  <form method="post" novalidate>{% csrf_token %}

    <div class="panel">
      <div class="panel-h"><h2>Overview</h2></div>
      <div class="panel-b">
        <div class="two">
          <div class="field"><label for="name">Website name</label>
            <input id="name" name="name" value="{{ values.name }}" placeholder="ABC Company Website">
            {% with msg=errors.name %}{% include "partials/error.html" %}{% endwith %}</div>
          <div class="field"><label for="slug">Slug</label>
            <input id="slug" name="slug" value="{{ values.slug }}" placeholder="left blank, built from the name">
            {% with msg=errors.slug %}{% include "partials/error.html" %}{% endwith %}</div>
        </div>
        <div class="two">
          <div class="field"><label for="client">Client</label>
            <select id="client" name="client">
              <option value="">Choose a client</option>
              {% for c in clients %}
                <option value="{{ c.pk }}" {% if values.client == c.pk|stringformat:"s" %}selected{% endif %}>{{ c.company|default:c.full_name }}</option>
              {% endfor %}
            </select>
            {% with msg=errors.client %}{% include "partials/error.html" %}{% endwith %}</div>
          <div class="field"><label for="project">Project</label>
            <select id="project" name="project">
              <option value="">None</option>
              {% for p in projects %}
                <option value="{{ p.pk }}" {% if values.project == p.pk|stringformat:"s" %}selected{% endif %}>{{ p.name }} — {{ p.client }}</option>
              {% endfor %}
            </select></div>
        </div>
        <div class="two">
          <div class="field"><label for="domain">Domain</label>
            <input id="domain" name="domain" value="{{ values.domain }}" placeholder="abc-company.ng">
            {% with msg=errors.domain %}{% include "partials/error.html" %}{% endwith %}</div>
          <div class="field"><label for="status">Status</label>
            <select id="status" name="status">
              {% for value, label in statuses %}
                <option value="{{ value }}" {% if values.status == value %}selected{% endif %}>{{ label }}</option>
              {% endfor %}
            </select></div>
        </div>
        <div class="two">
          <div class="field"><label for="built_on">Built on</label>
            <input id="built_on" name="built_on" type="date" value="{{ values.built_on }}"></div>
          <div class="field"><label for="last_deployment">Last deployment</label>
            <input id="last_deployment" name="last_deployment" type="date" value="{{ values.last_deployment }}"></div>
        </div>
      </div>
    </div>

    <div class="panel">
      <div class="panel-h"><h2>Domain</h2></div>
      <div class="panel-b">
        <div class="two">
          <div class="field"><label for="registrar">Registrar</label>
            <input id="registrar" name="registrar" value="{{ values.registrar }}" placeholder="Whogohost"></div>
          <div class="field"><label for="domain_expiry">Domain expires</label>
            <input id="domain_expiry" name="domain_expiry" type="date" value="{{ values.domain_expiry }}"></div>
        </div>
        <label style="display:flex;align-items:center;gap:10px;padding:9px 0">
          <input type="checkbox" name="auto_renew" style="width:auto" {% if values.auto_renew %}checked{% endif %}>
          <span>Auto-renew is on</span></label>
        <div class="field"><label for="dns_notes">DNS notes</label>
          <textarea id="dns_notes" name="dns_notes" style="min-height:80px">{{ values.dns_notes }}</textarea></div>
      </div>
    </div>

    <div class="panel">
      <div class="panel-h"><h2>Hosting</h2></div>
      <div class="panel-b">
        <div class="two">
          <div class="field"><label for="hosting_provider">Provider</label>
            <input id="hosting_provider" name="hosting_provider" value="{{ values.hosting_provider }}" placeholder="Managed VPS — Lagos region"></div>
          <div class="field"><label for="hosting_plan">Plan</label>
            <input id="hosting_plan" name="hosting_plan" value="{{ values.hosting_plan }}" placeholder="2 vCPU / 4 GB"></div>
        </div>
        <div class="two">
          <div class="field"><label for="server_reference">Server reference</label>
            <input id="server_reference" name="server_reference" value="{{ values.server_reference }}" placeholder="srv-04 · NG-LAG-04"></div>
          <div class="field"><label for="hosting_expiry">Hosting expires</label>
            <input id="hosting_expiry" name="hosting_expiry" type="date" value="{{ values.hosting_expiry }}"></div>
        </div>
        <div class="field"><label for="deployment_notes">Deployment notes</label>
          <textarea id="deployment_notes" name="deployment_notes" style="min-height:80px">{{ values.deployment_notes }}</textarea></div>
      </div>
    </div>

    <div class="panel">
      <div class="panel-h"><h2>Technology</h2></div>
      <div class="panel-b">
        <div class="two">
          <div class="field"><label for="backend">Backend</label>
            <input id="backend" name="backend" value="{{ values.backend }}" placeholder="Django · PostgreSQL · Nginx"></div>
          <div class="field"><label for="frontend">Frontend</label>
            <input id="frontend" name="frontend" value="{{ values.frontend }}" placeholder="HTML, CSS, JavaScript"></div>
        </div>
        <div class="two">
          <div class="field"><label for="database">Database</label>
            <input id="database" name="database" value="{{ values.database }}" placeholder="PostgreSQL 16"></div>
          <div class="field"><label for="apis">APIs</label>
            <input id="apis" name="apis" value="{{ values.apis }}" placeholder="SMTP, Google Analytics"></div>
        </div>
      </div>
    </div>

    <div class="panel">
      <div class="panel-h"><h2>SSL</h2></div>
      <div class="panel-b">
        <div class="two">
          <div class="field"><label for="ssl_provider">Provider</label>
            <input id="ssl_provider" name="ssl_provider" value="{{ values.ssl_provider }}" placeholder="Let's Encrypt"></div>
          <div class="field"><label for="ssl_expiry">Certificate expires</label>
            <input id="ssl_expiry" name="ssl_expiry" type="date" value="{{ values.ssl_expiry }}"></div>
        </div>
      </div>
    </div>

    <div class="panel">
      <div class="panel-h"><h2>Maintenance</h2></div>
      <div class="panel-b">
        <div class="two">
          <div class="field"><label for="maintenance_status">Plan</label>
            <select id="maintenance_status" name="maintenance_status">
              {% for value, label in maintenance_choices %}
                <option value="{{ value }}" {% if values.maintenance_status == value %}selected{% endif %}>{{ label }}</option>
              {% endfor %}
            </select></div>
          <div class="field"><label for="next_maintenance">Next window</label>
            <input id="next_maintenance" name="next_maintenance" type="date" value="{{ values.next_maintenance }}"></div>
        </div>
        <div class="field"><label for="last_update">Last update</label>
          <input id="last_update" name="last_update" type="date" value="{{ values.last_update }}"></div>
        <div class="field"><label for="maintenance_notes">Maintenance notes</label>
          <textarea id="maintenance_notes" name="maintenance_notes" style="min-height:80px">{{ values.maintenance_notes }}</textarea></div>
      </div>
    </div>

    <div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px">
      <button class="btn btn-primary">{% if website %}Save changes{% else %}Add website{% endif %}</button>
      <a href="{% if website %}{% url 'admin_website' website.slug %}{% else %}{% url 'admin_websites' %}{% endif %}" class="btn">Cancel</a>
    </div>
  </form>
</div>
{% endblock %}

{% block scripts %}
<script>
var name = document.getElementById('name'), slug = document.getElementById('slug');
if (name && slug && !slug.value) {
  name.addEventListener('input', function () {
    slug.value = name.value.toLowerCase().trim().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
  });
}
</script>
{% endblock %}