{% extends "base.html" %}

{% block title %}Edit {{ app.name }}{% endblock %}

{% block crumbs %}
{% import "_app_crumbs.html" as app_crumbs with context %}
{{ app_crumbs.nav(request=request, app=app) }}
{% endblock %}

{% block extra_head %}
<style>
.datasette-app-revision-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.datasette-app-revision-field-summary {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.35rem 0 0;
}

.datasette-app-revision-field-summary-label {
  color: rgba(17, 26, 53, 0.72);
  font-size: 0.85rem;
}

.datasette-app-revision-field {
  background: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: rgba(17, 26, 53, 0.78);
  font-size: 0.78rem;
  line-height: 1.2;
  padding: 0.12rem 0.32rem;
}
</style>
{{ codemirror_assets|safe }}
{% endblock %}

{% block content %}
{% import "_stored_query_picker.html" as stored_query_picker %}
{% import "_llm_prompt.html" as llm_prompt %}
<h1>Edit {{ app.name }}</h1>

<form class="datasette-app-form datasette-app-edit-form" method="post">
  <div class="datasette-app-edit-layout">
    <div class="datasette-app-edit-main">
      <div class="datasette-app-form-row">
        <label for="app-name">Name</label>
        <input id="app-name" type="text" name="name" value="{{ app.name }}">
      </div>
      <div class="datasette-app-form-row">
        <label for="app-description">Description</label>
        <textarea id="app-description" name="description" rows="3">{{ app.description }}</textarea>
      </div>
      <div class="datasette-app-form-row">
        <label for="html-editor">HTML</label>
        <textarea id="html-editor" name="html">{{ html_source }}</textarea>
      </div>
    </div>

    <aside class="datasette-app-edit-sidebar">
      <h2>Visibility</h2>
      <div class="datasette-app-form-row">
        <input type="hidden" name="is_private" value="0">
        <label>
          <input type="checkbox" name="is_private" value="1"{% if access_mode != "not-private" %} checked{% endif %}>
          Private (only me)
        </label>
        <p class="datasette-app-form-help">
          If Private is unchecked, this app will be visible to other users of this site.
        </p>
      </div>

      <h2>Data access</h2>
      <div class="datasette-app-form-row">
        <fieldset class="datasette-app-checkbox-group">
          <legend>Read-only SQL query databases</legend>
          <input type="hidden" name="sql_databases_present" value="1">
          {% for database in sql_database_options %}
            <label class="datasette-app-database-option">
              <input
                type="checkbox"
                name="sql_databases"
                value="{{ database.name }}"
                {% if database.selected %}checked{% endif %}
              >
              <span class="datasette-app-database-option-text">
                <a href="{{ database.href }}"><strong>{{ database.name }}</strong></a>{% if database.table_preview %}<span class="datasette-app-database-tables">, {{ database.table_preview|join(", ") }}{% if database.has_more_tables %}, ...{% endif %}</span>{% endif %}
              </span>
            </label>
          {% else %}
            <p>No databases are visible to you.</p>
          {% endfor %}
        </fieldset>
        <p class="datasette-app-form-help">
          The app will only be able to access data from the selected databases.
        </p>
      </div>

      <h2>Query access</h2>
      <div class="datasette-app-form-row">
        {{ stored_query_picker.picker(stored_query_options, query_search_url) }}
      </div>

      <h2>Network access</h2>
      <div class="datasette-app-form-row">
        <label for="app-csp-origins">Allowed network and asset origins</label>
        <p class="datasette-app-form-warning">
          Be cautious: any site listed here could receive private data from this app.
        </p>
        <textarea id="app-csp-origins" name="csp_origins" rows="4" placeholder="https://cdn.jsdelivr.net">{{ csp_origins }}</textarea>
        <p class="datasette-app-form-help">
          Enter exact https:// origins, one per line. Do not include paths, query strings, wildcards, or localhost. These origins can be used for fetch(), images, scripts, and styles.
        </p>
      </div>

      <div class="datasette-app-form-actions">
        <button type="submit">Save app</button>
      </div>

      {% if can_delete %}
      <div class="datasette-app-danger-zone">
        <h2>Delete app</h2>
        <p class="datasette-app-form-help">
          Hide this app and disable access to it. Revision history remains in the database for administrator recovery.
        </p>
        <a class="datasette-app-button datasette-app-danger-button" href="{{ urls.path('/-/apps/' ~ app.id ~ '/delete') }}">Delete app</a>
      </div>
      {% endif %}
    </aside>
  </div>
</form>

{{ llm_prompt.prompt(llm_prompt_data, "Use AI to edit this app") }}

<section class="datasette-app-revisions">
  <h2>Revision history</h2>
  <ol class="datasette-app-revision-list">
    {% for revision in revisions %}
      <li>
        <a href="{{ urls.path('/-/apps/' ~ app.id ~ '/revisions/' ~ revision.version) }}">v{{ revision.version }}</a>
        {% if revision.version == app.current_version %}
          <strong>current</strong>
        {% endif %}
        <time datetime="{{ revision.created_at }}">{{ revision.created_at[:19]|replace("T", " ") }}</time>
        {% if revision.created_revision %}
          <div class="datasette-app-revision-field-summary">
            <span class="datasette-app-revision-field-summary-label">Created</span>
          </div>
        {% elif revision.changed_field_labels %}
          <div class="datasette-app-revision-field-summary">
            <span class="datasette-app-revision-field-summary-label">Changed</span>
            <ul class="datasette-app-revision-fields">
              {% for field_label in revision.changed_field_labels %}
                <li class="datasette-app-revision-field">{{ field_label }}</li>
              {% endfor %}
            </ul>
          </div>
        {% endif %}
      </li>
    {% endfor %}
  </ol>
</section>
{% endblock %}