{% extends 'base.html' %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2"><i class="bi bi-gear-wide-connected text-primary me-2"></i>{{ _('OctoPrint Configuration') }}</h1>
</div>

<div class="card shadow-sm border-0">
    <div class="card-header bg-light fw-bold text-secondary border-bottom-0">
        <i class="bi bi-link-45deg me-1"></i>{{ _('Connection Settings') }}
    </div>
    <div class="card-body">
        <form id="octoConfigForm" onsubmit="submitConfig(event)">
            <div class="mb-3">
                <label for="octoprint_url" class="form-label fw-bold">{{ _('OctoPrint Base URL') }}</label>
                <div class="input-group mb-3 shadow-sm">
                    <span class="input-group-text bg-white text-muted" id="url-addon"><i class="bi bi-globe"></i></span>
                    <input type="url" class="form-control" id="octoprint_url" name="octoprint_url" aria-describedby="url-addon" placeholder="e.g. http://octopi.local" value="{{ configs.get('octoprint_url', '') }}" required>
                </div>
                <div class="form-text">
                    {{ _('The local IP address or hostname of your OctoPrint server.') }}
                </div>
            </div>

            <div class="mb-4">
                <label for="octoprint_apikey" class="form-label fw-bold">{{ _('API Key / Application Key') }}</label>
                <div class="input-group shadow-sm">
                    <span class="input-group-text bg-white text-muted" id="key-addon"><i class="bi bi-key"></i></span>
                    <input type="password" class="form-control" id="octoprint_apikey" name="octoprint_apikey" aria-describedby="key-addon" placeholder="{{ _('Paste API Key here') }}" value="{{ configs.get('octoprint_apikey', '') }}">
                </div>
                <div class="form-text">
                    {{ _('Can be found in OctoPrint Settings -> Application Keys or API.') }}
                </div>
            </div>

            <div class="d-flex justify-content-end">
                <button type="submit" class="btn btn-primary px-4 rounded-pill shadow-sm" id="btn-save-octo"><i class="bi bi-save2 me-2"></i>{{ _('Save Connection Settings') }}</button>
            </div>
        </form>
    </div>
</div>

<script>
function submitConfig(event) {
    event.preventDefault();
    const form = document.getElementById('octoConfigForm');
    const formData = new FormData(form);
    const btn = document.getElementById('btn-save-octo');
    const originalText = btn.innerHTML;
    
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Saving...';
    
    fetch("{{ url_for('printer.octo_config') }}", {
        method: "POST",
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => {
        if (response.ok) {
            window.showToast("{{ _('OctoPrint settings updated') }}", "success");
        } else {
            window.showToast("{{ _('Error saving settings') }}", "danger");
        }
    })
    .catch(error => {
        console.error('Error:', error);
        window.showToast("{{ _('Network error') }}", "danger");
    })
    .finally(() => {
        btn.disabled = false;
        btn.innerHTML = originalText;
    });
}
</script>
{% endblock %}