{% extends "admin/base_site.html" %}
{% load i18n static %}
{% load management_ui_tags %}

{% block title %}{{ title }} | {{ site_title }}{% endblock %}

{% block extrahead %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'admin/css/forms.css' %}">
<link rel="stylesheet" href="{% static 'management_ui/css/commands.css' %}">
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
  <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
  &rsaquo; <a href="{% url 'management_ui:command_list' %}">{% trans 'Management Commands' %}</a>
  &rsaquo; {{ command_name }}
</div>
{% endblock %}

{% block content %}
<h1>{{ command_app_label }} / {{ command_name }}</h1>

{% if command_help %}
<div class="help">
  {{ command_help }}
</div>
{% endif %}

<div class="module">
  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}

    {% if form.errors %}
    <p class="errornote">
      {% trans "Please correct the errors below." %}
    </p>
    {% endif %}

    <!-- Command-specific arguments -->
    {% if command_field_names %}
    <fieldset class="module aligned">
      {% for field_name in command_field_names %}
        {% with field=form|get_item:field_name %}
        <div class="form-row{% if field.errors %} errors{% endif %}">
          {{ field.errors }}
          <div class="flex-container{% if field.field.widget.input_type == 'checkbox' %} checkbox-row{% endif %}">
            {% if field.field.widget.input_type == 'checkbox' %}
              {{ field }}
              <label for="{{ field.id_for_label }}" class="vCheckboxLabel">{{ field.label }}</label>
            {% else %}
              <label for="{{ field.id_for_label }}" class="{% if field.field.required %}required{% endif %}">{{ field.label }}:</label>
              {{ field }}
            {% endif %}
          </div>
          {% if field.help_text %}
            <div class="help">{{ field.help_text }}</div>
          {% endif %}
        </div>
        {% endwith %}
      {% endfor %}
    </fieldset>
    {% else %}
    <p class="help">{% trans "This command has no specific arguments." %}</p>
    {% endif %}

    <!-- BaseCommand arguments (in collapsible spoiler) -->
    {% if base_command_field_names %}
    <details class="base-command-options" {% if not command_field_names %}open{% endif %}>
      <summary>
        <strong>{% trans "Django BaseCommand Options" %}</strong>
        <span class="help">{% trans "(verbosity, traceback, etc.)" %}</span>
      </summary>
      <fieldset class="module aligned">
        {% for field_name in base_command_field_names %}
          {% with field=form|get_item:field_name %}
          <div class="form-row{% if field.errors %} errors{% endif %}">
            {{ field.errors }}
            <div class="flex-container{% if field.field.widget.input_type == 'checkbox' %} checkbox-row{% endif %}">
              {% if field.field.widget.input_type == 'checkbox' %}
                {{ field }}
                <label for="{{ field.id_for_label }}" class="vCheckboxLabel">{{ field.label }}</label>
              {% else %}
                <label for="{{ field.id_for_label }}" class="{% if field.field.required %}required{% endif %}">{{ field.label }}:</label>
                {{ field }}
              {% endif %}
            </div>
            {% if field.help_text %}
              <div class="help">{{ field.help_text }}</div>
            {% endif %}
          </div>
          {% endwith %}
        {% endfor %}
      </fieldset>
    </details>
    {% endif %}

    <div class="submit-row">
      <input type="submit" value="{% trans 'Run Command' %}" class="default">
      <a href="{% url 'management_ui:command_list' %}" class="button cancel-link">
        {% trans 'Back to List' %}
      </a>
    </div>
  </form>
</div>

{% if result %}
<div class="command-result {% if result.success %}success{% else %}error{% endif %}">
  <h2>
    {% if result.success %}
      {% trans "Command Completed Successfully" %}
    {% else %}
      {% trans "Command Failed" %}
    {% endif %}
    <span class="duration">({{ result.duration_ms }}ms)</span>
  </h2>

  {% if result.stdout %}
  <div class="output-section">
    <h3>{% trans "Output" %}</h3>
    <pre class="stdout">{{ result.stdout }}</pre>
  </div>
  {% endif %}

  {% if result.stderr %}
  <div class="output-section">
    <h3>{% trans "Error Output" %}</h3>
    <pre class="stderr">{{ result.stderr }}</pre>
  </div>
  {% endif %}

  {% if result.error_message %}
  <div class="error-message">
    <strong>{% trans "Error:" %}</strong> {{ result.error_message }}
  </div>
  {% endif %}
</div>
{% endif %}

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('[data-path-widget]').forEach(function(container) {
    container.querySelectorAll('.path-mode-toggle').forEach(function(link) {
      link.addEventListener('click', function(e) {
        e.preventDefault();
        var target = this.dataset.toggleTo;
        container.querySelector('[data-path-mode="file"]').style.display = target === 'file' ? '' : 'none';
        container.querySelector('[data-path-mode="text"]').style.display = target === 'text' ? '' : 'none';
        if (target === 'file') {
          container.querySelector('.path-text-input').value = '';
        } else {
          container.querySelector('.path-file-input').value = '';
        }
      });
    });
  });
});
</script>
{% endblock %}