{% load plugin_tags %}
<style>
    .htmx-indicator {
        display: none;
    }

    .htmx-request .htmx-indicator {
        display: inline;
    }

    .htmx-request.htmx-indicator {
        display: inline;
    }
</style>
<main id="{{ plugin.name }}-form-main" class="center stack">
  <section class="stack">
    <h2>Preview</h2>
    {% render_template_string my_plugin.templates.string_templates.main %}
  </section>
  <section id="indicator" class="htmx-indicator stack center">
    <h3>LLM generating code...</h3>
    <div class="center">
      <svg width="57" height="57" viewBox="0 0 57 57" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
        <g fill="black" fill-rule="evenodd">
          <g transform="translate(1 1)" stroke-width="2">
            <circle cx="5" cy="50" r="5">
              <animate attributeName="cy"
                       begin="0s" dur="2.2s"
                       values="50;5;50;50"
                       calcMode="linear"
                       repeatCount="indefinite"></animate>
              <animate attributeName="cx"
                       begin="0s" dur="2.2s"
                       values="5;27;49;5"
                       calcMode="linear"
                       repeatCount="indefinite"></animate>
            </circle>
            <circle cx="27" cy="5" r="5">
              <animate attributeName="cy"
                       begin="0s" dur="2.2s"
                       from="5" to="5"
                       values="5;50;50;5"
                       calcMode="linear"
                       repeatCount="indefinite"></animate>
              <animate attributeName="cx"
                       begin="0s" dur="2.2s"
                       from="27" to="27"
                       values="27;49;5;27"
                       calcMode="linear"
                       repeatCount="indefinite"></animate>
            </circle>
            <circle cx="49" cy="50" r="5">
              <animate attributeName="cy"
                       begin="0s" dur="2.2s"
                       values="50;50;5;50"
                       calcMode="linear"
                       repeatCount="indefinite"></animate>
              <animate attributeName="cx"
                       from="49" to="49"
                       begin="0s" dur="2.2s"
                       values="49;5;27;49"
                       calcMode="linear"
                       repeatCount="indefinite"></animate>
            </circle>
          </g>
        </g>
      </svg>
    </div>
  </section>
  <editable-form id="{{ plugin_name }}-editable-form" class="stack-small">
    {#  This is a hidden form that will be submitted by the button below.#}
    <form
      id="{{ plugin_name }}-hidden-form"
      class="stack-small"
      hx-post="{% url 'django_resume:plugin-detail' plugin.name %}"
      hx-target="#{{ plugin.name }}-form-main"
      hx-swap="outerHTML"
      hx-indicator="#indicator"
    >
      <input data-field="name" type="hidden" name="name" value="{{ plugin.name }}">
      <input data-field="prompt" type="hidden" name="prompt" value="">
      <input data-field="module" type="hidden" name="module" value="">
      <input data-field="content_template" type="hidden" name="content_template" value="">
      <input data-field="form_template" type="hidden" name="form_template" value="">
      <input data-field="llm" type="hidden" name="llm" value="false">
      <input data-field="model" type="hidden" name="model" value="{{ plugin.model }}">
    </form>
    <section class="stack">
      <h2>Plugin Details for {{ plugin.name }}</h2>
    </section>
    <section class="stack">
      <h3>Prompt</h3>
      <p contenteditable="true" data-field="prompt" class="textarea">
        {{ plugin.prompt }}
      </p>
      <div class="edit-panel">
        <label class="with-icon cluster">
          <input data-field="llm" class="large-checkbox" type="checkbox" id="edit-mode">
          Generate Code from Prompt
          <svg class="edit-icon">
            <use href="#edit"></use>
          </svg>
        </label>
      </div>
      <select data-field="model" class="form-select">
        {% for value, label in plugin.ModelName.choices %}
          <option value="{{ value }}" {% if value == plugin.model %}selected{% endif %}>
            {{ label }}
          </option>
        {% endfor %}
      </select>
    </section>
    <section>
      <h3>Plugin Data</h3>
      <pre>
        <code>{{ plugin.plugin_data | pprint }}</code>
      </pre>
    </section>
    <section>
      <h3>Plugin Source Module (PluginForm and PluginClass)</h3>
      <pre>
        <code contenteditable="true" data-field="module" class="textarea">{{ plugin.module }}</code>
      </pre>
      {% for error in form.module.errors %}
        <p class="error">{{ error|escape }}</p>
      {% endfor %}
    </section>
    <section>
      <h3>Django Template for Rendering Plugin Data to HTML</h3>
      <pre>
        <code contenteditable="true" data-field="content_template">{{ plugin.content_template }}</code>
      </pre>
      {% for error in form.content_template.errors %}
        <p class="error">{{ error|escape }}</p>
      {% endfor %}
    </section>
    <section>
      <h3>Django Template for Editing Plugin Data Inline</h3>
      <pre>
        <code contenteditable="true" data-field="form_template">{{ plugin.form_template }}</code>
      </pre>
      {% for error in form.content_template.errors %}
        <p class="error">{{ error|escape }}</p>
      {% endfor %}
    </section>
    <button id="{{ plugin.name }}-submit" type="submit">
      <svg class="edit-icon-small">
        <use href="#ok"></use>
      </svg>
    </button>
  </editable-form>
  <script>
      document.querySelector('select[data-field="model"]').addEventListener('change', function (e) {
          document.querySelector('input[data-field="model"]').value = e.target.value;
      });
  </script>
  <script>hljs.highlightAll();</script>
</main>
