{% extends "core/base.html" %}
{% block title %}Create short link · debug{% endblock %}
{% block content %}
<div class="section debug-section">
  <div class="container" style="max-width: 40rem;">
    <h1 class="hero-title" style="font-size: 2.2rem;">Create a short link</h1>
    <p class="hero-subtitle" style="margin: 1rem 0 2rem; text-align: left;">
      DEBUG only. Same allowlist as the API. Not served when <code>DEBUG</code> is false.
    </p>

    {% if messages %}
    <ul class="messages" style="list-style: none; padding: 0; margin: 0 0 1rem; color: var(--primary-color);">
      {% for message in messages %}<li>{{ message }}</li>{% endfor %}
    </ul>
    {% endif %}

    {% if created_link %}
    <div class="card debug-result">
      <p class="card-title">Short URL</p>
      <p><code>{{ created_link.public_short_url }}</code></p>
      <p class="card-text">Target: {{ created_link.target_url }}</p>
      <a class="btn" href="{{ created_link.public_short_url }}" style="margin-top: 1rem; padding: 0.7rem 1.4rem;">Open</a>
    </div>
    {% endif %}

    <form method="post" action="{% url 'debug-create' %}">
      {% csrf_token %}
      {{ form.non_field_errors }}
      {% for field in form %}
      <label>
        {{ field.label }}
        <input class="form-control" type="{{ field.field.widget.input_type|default:'text' }}"
          name="{{ field.name }}" value="{{ field.value|default_if_none:'' }}"
          {% if field.field.widget.attrs.placeholder %}placeholder="{{ field.field.widget.attrs.placeholder }}"{% endif %}
          {% if field.field.widget.attrs.autofocus %}autofocus{% endif %}>
        {% if field.errors %}<span class="alert-text" style="color: #ff6b6b;">{{ field.errors|striptags }}</span>{% endif %}
      </label>
      {% endfor %}
      <button type="submit" class="btn">Mint</button>
    </form>
  </div>
</div>
{% endblock %}