{% extends "base.html" %}

{% block title %}{% if let Some(s) = script %}{{ s.name }}{% else %}new script{% endif %} - {{ bot_name }} - irc.now{% endblock %}

{% block banner %}{% include "partials/announcement.html" %}{% endblock %}
{% block flash %}{% include "partials/flash.html" %}{% endblock %}
{% block content %}
<div class="content">
  <h1>{% if script.is_some() %}edit script{% else %}new script{% endif %}</h1>
  <p style="font-family: var(--mono); font-size: 12px; color: var(--text-3); margin-bottom: 14px;">
    <a href="/bots/{{ bot_id }}">{{ bot_name }}</a>
  </p>

  {% if let Some(s) = script %}
  <form method="post" action="/bots/{{ bot_id }}/scripts/{{ s.id }}/update"
        hx-post="/bots/{{ bot_id }}/scripts/{{ s.id }}/update" hx-swap="none">
    <div class="card">
      <h2>script</h2>
      <div class="form-group" style="margin-bottom: 12px;">
        <label for="name">name</label>
        <input class="input" type="text" id="name" name="name" value="{{ s.name }}" required>
      </div>
      <div class="form-group" style="margin-bottom: 12px;">
        <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
          <input type="checkbox" name="enabled" value="on"{% if s.enabled %} checked{% endif %}>
          enabled
        </label>
      </div>
      <div class="form-group" style="margin-bottom: 14px;">
        <label for="source">lua source</label>
        <textarea class="input" id="source" name="source" rows="20" style="font-family: var(--mono); font-size: 13px; resize: vertical;">{{ s.source }}</textarea>
      </div>
      <button type="submit" class="btn-fill">
        <span class="htmx-hide-on-request">save</span>
        <span class="htmx-indicator">saving...</span>
      </button>
    </div>
  </form>
  {% else %}
  <form method="post" action="/bots/{{ bot_id }}/scripts/create"
        hx-post="/bots/{{ bot_id }}/scripts/create" hx-swap="none">
    <div class="card">
      <h2>script</h2>
      <div class="form-group" style="margin-bottom: 12px;">
        <label for="name">name</label>
        <input class="input" type="text" id="name" name="name" placeholder="my-script" required>
      </div>
      <div class="form-group" style="margin-bottom: 14px;">
        <label for="source">lua source</label>
        <textarea class="input" id="source" name="source" rows="20" style="font-family: var(--mono); font-size: 13px; resize: vertical;"></textarea>
      </div>
      <button type="submit" class="btn-fill">
        <span class="htmx-hide-on-request">create</span>
        <span class="htmx-indicator">creating...</span>
      </button>
    </div>
  </form>
  {% endif %}

  <div class="card">
    <h2>api reference</h2>
    <div style="font-family: var(--mono); font-size: 12px; color: var(--text-2); line-height: 2;">
      <div><span style="color: var(--g);">irc.send(target, message)</span> -- send a message to a channel or user</div>
      <div><span style="color: var(--g);">irc.join(channel)</span> -- join a channel</div>
      <div><span style="color: var(--g);">irc.part(channel)</span> -- leave a channel</div>
      <div><span style="color: var(--g);">irc.raw(line)</span> -- send a raw IRC line</div>
      <div><span style="color: var(--g);">kv.get(key)</span> -- get a stored value</div>
      <div><span style="color: var(--g);">kv.set(key, value)</span> -- store a value</div>
      <div><span style="color: var(--g);">kv.delete(key)</span> -- delete a stored value</div>
      <div><span style="color: var(--g);">log.info(message)</span> -- log an info message</div>
      <div><span style="color: var(--g);">log.error(message)</span> -- log an error message</div>
    </div>
  </div>

  {% if let Some(s) = script %}
  <div class="card">
    <h2>danger zone</h2>
    <form method="post" action="/bots/{{ bot_id }}/scripts/{{ s.id }}/delete"
          hx-post="/bots/{{ bot_id }}/scripts/{{ s.id }}/delete" hx-confirm="delete script {{ s.name }}?" hx-swap="none">
      <button type="submit" class="btn-fill" style="background: #AA5555;">
        <span class="htmx-hide-on-request">delete script</span>
        <span class="htmx-indicator">deleting...</span>
      </button>
    </form>
  </div>
  {% endif %}
</div>
{% endblock %}