{% extends "admin_base.html" %}

{% block page_title %}SMTP Settings{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/smtp/assets/css/smtp.ui.css">
{% endblock %}

{% block admin_content %}
<main class="smtp-settings-page blocks-workspace" aria-labelledby="smtp-settings-title">
<header class="smtp-page-heading">
        <h1 id="smtp-settings-title">SMTP Settings</h1>
        <p>Connect your email provider, then send a test message to verify the settings.</p>
</header>
<div class="blocks-workspace-notice" data-smtp-feedback data-workspace-notice role="status" aria-live="polite" hidden></div>

<div class="smtp-settings-grid">
    <section class="smtp-card">
        <div class="smtp-card-header">Quick setup</div>
        <div class="smtp-card-body">
            <p class="smtp-help">Choose your email provider to fill in its standard server details. You can edit them before saving.</p>
            <div class="smtp-presets-list">
                <button type="button" class="blocks-button blocks-button-secondary smtp-preset-button" data-smtp-preset="gmail">
                    <img src="https://www.google.com/favicon.ico" width="16" alt=""> Gmail / Google Workspace
                </button>
                <button type="button" class="blocks-button blocks-button-secondary smtp-preset-button" data-smtp-preset="outlook">
                    <img src="https://www.microsoft.com/favicon.ico" width="16" alt=""> Outlook / Office 365
                </button>
                <button type="button" class="blocks-button blocks-button-secondary smtp-preset-button" data-smtp-preset="sendgrid">
                    SendGrid
                </button>
                <button type="button" class="blocks-button blocks-button-secondary smtp-preset-button" data-smtp-preset="mailgun">
                    Mailgun
                </button>
            </div>
        </div>
    </section>

    <section class="smtp-card">
        <div class="smtp-card-header">Server and sender</div>
        <div class="smtp-card-body">
            <form id="smtp-settings-form">
                <div class="smtp-form-grid">
                    <div class="form-group">
                        <label for="smtp_host">SMTP host</label>
                        <input class="blocks-control" type="text" name="smtp_host" id="smtp_host" value="{{ plugin_settings.smtp_host | default(value='') }}" required>
                    </div>
                    <div class="form-group">
                        <label for="smtp_port">Port</label>
                        <input class="blocks-control" type="number" name="smtp_port" id="smtp_port" value="{{ plugin_settings.smtp_port | default(value='587') }}" required>
                    </div>
                </div>

                <div class="smtp-form-grid">
                    <div class="form-group">
                        <label for="smtp_user">Username or email</label>
                        <input class="blocks-control" type="text" name="smtp_user" id="smtp_user" autocomplete="username" value="{{ plugin_settings.smtp_user | default(value='') }}" required>
                    </div>
                    <div class="form-group">
                        <label for="smtp_pass">Password or app key</label>
                        <input class="blocks-control" type="password" name="smtp_pass" id="smtp_pass" autocomplete="new-password" value="{{ plugin_settings.smtp_pass | default(value='') }}" required>
                    </div>
                </div>

                <div class="form-group">
                    <label for="smtp_encryption">Connection encryption</label>
                    <select class="blocks-control--select blocks-control" name="smtp_encryption" id="smtp_encryption">
                        <option value="none" {% if plugin_settings.smtp_encryption == 'none' %}selected{% endif %}>None</option>
                        <option value="tls" {% if plugin_settings.smtp_encryption == 'tls' %}selected{% endif %}>TLS (SSL)</option>
                        <option value="starttls" {% if plugin_settings.smtp_encryption == 'starttls' %}selected{% endif %}>STARTTLS</option>
                    </select>
                </div>

                <div class="smtp-section-divider" role="separator"><span>Sender identity</span></div>

                <div class="smtp-form-grid">
                    <div class="form-group">
                        <label for="from_name">Sender name</label>
                        <input class="blocks-control" type="text" name="from_name" id="from_name" autocomplete="organization" value="{{ plugin_settings.from_name | default(value='') }}" required>
                    </div>
                    <div class="form-group">
                        <label for="from_email">Sender email</label>
                        <input class="blocks-control" type="email" name="from_email" id="from_email" autocomplete="email" value="{{ plugin_settings.from_email | default(value='') }}" required>
                    </div>
                </div>

                <div class="smtp-form-actions">
                    <button type="submit" class="blocks-button blocks-button-primary">Save Settings</button>
                    <button type="button" class="blocks-button blocks-button-secondary" data-smtp-test-connection>Test Connection</button>
                </div>
            </form>
        </div>
    </section>
</div>

<script src="/plugins/smtp/assets/js/smtp_admin.js"></script>
</main>
{% endblock %}