{% extends 'superuser/base_super_user.html' %}

{% block title %}Add Gateway | SMS Infrastructure{% endblock %}

{% block page_title %}External API Integration{% endblock %}
{% block page_subtitle %}Configure a third-party SMS microservice to bypass default platform gateway.{% endblock %}

{% block content %}
<div class="card" style="max-width: 600px;">
    <form method="post" style="display: flex; flex-direction: column; gap: 20px;">
        {% csrf_token %}
        
        <div class="form-group">
            <label style="font-size: 0.75rem; color: #94a3b8; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; display: block;">Provider Name</label>
            <input type="text" name="name" required placeholder="e.g. Twilio, Infobip, Custom Local" style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #e2e8f0; font-family: inherit; font-weight: 700;">
        </div>

        <div class="form-group">
            <label style="font-size: 0.75rem; color: #94a3b8; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; display: block;">API Endpoint URL</label>
            <input type="url" name="api_url" required placeholder="https://api.provider.com/v1/send" style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #e2e8f0; font-family: inherit; font-weight: 700;">
            <p style="font-size: 0.65rem; color: #94a3b8; margin-top: 5px; font-weight: 700;">System will POST: api_key, senderid, number, message</p>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
            <div class="form-group">
                <label style="font-size: 0.75rem; color: #94a3b8; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; display: block;">API Secret/Key</label>
                <input type="text" name="api_key" required style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #e2e8f0; font-family: inherit; font-weight: 700;">
            </div>
            <div class="form-group">
                <label style="font-size: 0.75rem; color: #94a3b8; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; display: block;">Sender ID / Mask</label>
                <input type="text" name="sender_id" placeholder="88017..." style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #e2e8f0; font-family: inherit; font-weight: 700;">
            </div>
        </div>

        <div style="display: flex; gap: 15px; margin-top: 10px;">
            <button type="submit" class="btn btn-accent" style="flex: 1; padding: 15px; font-size: 0.9rem;">
                <i class="fas fa-link" style="margin-right: 8px;"></i> CONNECT GATEWAY
            </button>
            <a href="{% url 'super_sms_gateway_list' %}" class="btn" style="flex: 0.4; padding: 15px; font-size: 0.9rem; background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; justify-content: center;">
                CANCEL
            </a>
        </div>
    </form>
</div>
{% endblock %}