{% extends "base.html" %}

{% block title %}{{ _('Login') }} - {{ app_name }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body text-center">
                <div class="mb-4">
                    {% if settings and settings.has_logo() %}
            <img src="{{ settings.get_logo_url() }}" alt="{{ _('Company Logo') }}" class="mb-3" width="64" height="64">
            {% else %}
            <img src="{{ url_for('static', filename='images/drytrix-logo.svg') }}" alt="{{ _('DryTrix Logo') }}" class="mb-3" width="64" height="64">
            {% endif %}
                    <h2 class="card-title mb-2">{{ _('Welcome to TimeTracker') }}</h2>
                    <p class="text-muted mb-0">{{ _('Powered by') }} <strong>DryTrix</strong></p>
                </div>
                
                <p class="text-muted mb-4">
                    {{ _('Enter your username to start tracking time') }}
                </p>
                
                <form method="POST" action="{{ url_for('auth.login') }}" autocomplete="on" novalidate>
                    <div class="mb-3">
                        <label for="username" class="form-label">{{ _('Username') }}</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="fas fa-user"></i>
                            </span>
                            <input type="text" 
                                   class="form-control" 
                                   id="username" 
                                   name="username" 
                                   placeholder="{{ _('Enter your username') }}"
                                   required 
                                   autofocus>
                        </div>
                    </div>
                    
                    <button type="submit" class="btn btn-primary w-100" data-original-text="{{ _('Continue') }}">
                        <i class="fas fa-sign-in-alt me-2"></i>{{ _('Continue') }}
                    </button>
                </form>
                
                <hr class="my-4">
                
                <div class="alert alert-info" role="alert">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>{{ _('Internal Tool:') }}</strong> {{ _('This is a private time tracking application for internal use only.') }}
                </div>
                
                {% if settings and settings.allow_self_register %}
                <p class="text-muted small">
                    <i class="fas fa-user-plus me-1"></i>
                    {{ _('New users will be created automatically') }}
                </p>
                {% endif %}
            </div>
        </div>
        
        <div class="text-center mt-3">
            <small class="text-muted">
                {{ _('Version') }} {{ app_version }} | 
                <a href="{{ url_for('main.about') }}" class="text-decoration-none">{{ _('About') }}</a> | 
                <a href="{{ url_for('main.help') }}" class="text-decoration-none">{{ _('Help') }}</a>
            </small>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Auto-focus on username field
    try { document.getElementById('username').focus(); } catch(e) {}
    
    // Handle form submission with minimal logging and safe guard
    const form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', function(e) {
            const usernameEl = document.getElementById('username');
            const username = (usernameEl && usernameEl.value ? usernameEl.value : '').trim();
            if (!username) {
                e.preventDefault();
                alert('{{ _('Please enter a username') }}');
                return false;
            }
            // Show loading state
            const submitBtn = this.querySelector('button[type="submit"]');
            if (submitBtn) {
                const originalText = submitBtn.innerHTML;
                submitBtn.setAttribute('data-original-text', originalText);
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>{{ _('Signing in...') }}';
                submitBtn.disabled = true;
                // Fallback: re-enable after 8s in case of network/proxy issues
                setTimeout(() => {
                    if (submitBtn.disabled) {
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = submitBtn.getAttribute('data-original-text') || '{{ _('Continue') }}';
                        console.warn('Login submission appears stalled. Button re-enabled.');
                    }
                }, 8000);
            }
            // Log to console for troubleshooting
            console.log('Submitting login form to', this.getAttribute('action') || window.location.pathname);
        });
    }
</script>
{% endblock %}
