{% extends "madga/studio/base.html" %}
{% load i18n madga_studio_tags %}

{% block breadcrumbs %}
  <a href="{% url 'madga_studio:channel_list' %}" class="crumb">{% trans "Channels" %}</a>
  <span class="sep">/</span>
  <span class="crumb is-current">{% blocktrans with label=publisher.label %}Custom {{ label }} app{% endblocktrans %}</span>
{% endblock %}

{% block content %}
<div class="madga-page" style="max-width:640px;">
  <div class="madga-card" style="padding:24px;">
    <h1 class="madga-page-title" style="margin:0 0 6px; font-size:20px;">
      {% blocktrans with label=publisher.label %}Custom {{ label }} app for this workspace{% endblocktrans %}
    </h1>
    <p class="madga-page-subtitle" style="margin:0 0 18px;">
      {% blocktrans %}Use your own platform app instead of the operator's shared one — your OAuth consent screen will show your brand, and you'll have your own rate limits and audit log on the platform side. Leave this empty to keep using the shared app.{% endblocktrans %}
    </p>

    <div class="madga-card" style="padding:14px; margin-bottom:18px; background:var(--bg-2);">
      <div style="font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-2); margin-bottom:6px;">{% trans "Callback URL to register on the platform" %}</div>
      <code style="display:block; padding:8px 10px; background:var(--bg-1); border:1px solid var(--border-strong); border-radius:6px; font-size:11.5px; word-break:break-all;">{{ callback_url }}</code>
    </div>

    <form method="post" style="display:flex; flex-direction:column; gap:14px;">
      {% csrf_token %}

      <div class="madga-field">
        <label class="madga-field-label">{% trans "Client ID" %}</label>
        <input class="madga-input" type="text" name="client_id" value="{{ existing.client_id|default:'' }}" placeholder="{% trans 'Empty = use the shared app' %}">
      </div>

      <div class="madga-field">
        <label class="madga-field-label">{% trans "Client Secret" %}</label>
        <input class="madga-input" type="password" name="client_secret" placeholder="{% if existing %}{% trans '(unchanged — leave empty to keep the stored value)' %}{% else %}{% trans 'paste the secret here' %}{% endif %}" autocomplete="off">
        {% if existing %}
          <span class="madga-field-help">{% trans "A secret is already stored encrypted. Leave this field empty to keep it." %}</span>
        {% endif %}
      </div>

      <div class="madga-field">
        <label class="madga-field-label">{% trans "Notes (optional)" %}</label>
        <input class="madga-input" type="text" name="notes" value="{{ existing.notes|default:'' }}" placeholder="{% trans 'e.g. Acme corporate FB app — managed by ops@acme.com' %}">
      </div>

      <div style="display:flex; gap:8px;">
        <button type="submit" class="madga-btn madga-btn--primary">{% trans "Save" %}</button>
        <a href="{% url 'madga_studio:channel_list' %}" class="madga-btn">{% trans "Cancel" %}</a>
      </div>
    </form>

    {% if existing %}
      <div style="margin-top:18px; padding:14px; border-top:1px solid var(--border); font-size:12px; color:var(--fg-2);">
        <strong>{% trans "Currently using your custom app." %}</strong><br>
        {% trans "Submit an empty Client ID to revert to the shared app." %}
      </div>
    {% endif %}
  </div>
</div>
{% endblock %}