<!DOCTYPE html>
<html lang="{{ current_language }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ _(form_mode == 'edit' and 'device_edit_title' or 'device_add_title') }} - iAccess Terminal</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
    :root {
        --primary-color: #667eea;
        --secondary-color: #764ba2;
        --success-color: #28a745;
        --warning-color: #ffc107;
        --danger-color: #dc3545;
        --info-color: #17a2b8;
        --dark-color: #343a40;
        --light-color: #f8f9fa;
    }
    body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    .navbar { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); }
    .navbar-brand { font-weight: 700; color: var(--primary-color) !important; }
    .nav-link { color: var(--dark-color) !important; font-weight: 500; transition: all 0.3s ease; }
    .nav-link:hover { color: var(--primary-color) !important; transform: translateY(-1px); }
    
    .main-container { margin-top: 80px; padding: 20px; }
    .device-form-card { background: rgba(255,255,255,0.95); border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); max-width: 600px; margin: 0 auto; }
    .form-header { background: linear-gradient(135deg, var(--primary-color, #667eea), var(--secondary-color, #764ba2)); color: white; padding: 30px; border-radius: 20px 20px 0 0; text-align: center; }
    .form-header h2 { margin: 0; font-size: 1.6rem; font-weight: 700; }
    .form-header p { margin: 10px 0 0 0; opacity: 0.9; font-size: 0.95rem; }
    .form-body { padding: 30px; }
    .form-group { margin-bottom: 18px; }
    .form-label { font-weight: 600; color: #212529; margin-bottom: 8px; display: flex; align-items: center; }
    .form-label i { margin-right: 8px; color: var(--primary-color, #667eea); width: 20px; }
    .btn-modern { border-radius: 8px; padding: 10px 20px; font-weight: 600; font-size: 0.9rem; transition: all 0.3s ease; border: none; text-transform: uppercase; letter-spacing: 0.25px; }
    .btn-primary-modern { background: linear-gradient(135deg, var(--primary-color, #667eea), var(--secondary-color, #764ba2)); color: #fff; }
    .btn-secondary-modern { background: linear-gradient(135deg, #6c757d, #495057); color: #fff; }
    .btn-danger-modern { background: linear-gradient(135deg, #dc3545, #c82333); color: #fff; }
    .device-info-card { background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.1)); border: 1px solid rgba(102,126,234,0.2); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
    .info-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(102,126,234,0.1); }
    .info-item:last-child { border-bottom: none; }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg fixed-top">
        <div class="container">
            <a class="navbar-brand" href="https://monicont.com" target="_blank">
                <img src="{{ url_for('static', filename='img/monicont_logo.png') }}" alt="Logo" style="width: 120px; height: auto;" class="me-3">
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('home') }}">
                            <i class="fas fa-home me-1"></i>{{ _('dashboard') }}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('devices') }}">
                            <i class="fas fa-microchip me-1"></i>{{ _('devices') }}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('users') }}">
                            <i class="fas fa-users me-1"></i>{{ _('users_title') }}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('access_logs') }}">
                            <i class="fas fa-clipboard-list me-1"></i>{{ _('access_logs_title') }}
                        </a>
                    </li>
                </ul>
                
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown">
                            {% if user and user.profile_image %}
                                {% if user.profile_image.startswith('@') %}
                                  {% set imgfile = user.profile_image[1:] %}
                                  <img src="{{ url_for('static', filename='uploads/' + imgfile) }}" 
                                {% else %}
                                  <img src="{{ url_for('static', filename='uploads/' + user.profile_image) }}" 
                                {% endif %}
                                      alt="Profil Resmi" class="rounded-circle me-2" width="32" height="32" style="object-fit: cover;">
                            {% else %}
                                <img src="{{ url_for('static', filename='img/default-avatar.png') }}" 
                                    alt="Profil Resmi" class="rounded-circle me-2" width="32" height="32" style="object-fit: cover;">
                            {% endif %}
                            <div class="d-flex flex-column">
                                <span class="fw-bold">{{ user_name }}</span>
                                {% if user and user.company %}
                                    <small class="text-muted">{{ user.company }}</small>
                                {% endif %}
                            </div>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                            <li><a class="dropdown-item" href="{{ url_for('profile') }}"><i class="fas fa-user me-2"></i>{{ _('profile') }}</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ url_for('logout') }}"><i class="fas fa-sign-out-alt me-2"></i>{{ _('logout') }}</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="main-container">
        <div class="container">
            <div class="device-form-card">
                <div class="form-header">
                    <h2>
                        <i class="fas {{ form_mode == 'edit' and 'fa-edit' or 'fa-plus' }} me-2"></i>
                        {{ _(form_mode == 'edit' and 'device_edit_title' or 'device_add_title') }}
                    </h2>
                    <p>{{ _(form_mode == 'edit' and 'device_edit_subtitle' or 'device_add_subtitle') }}</p>
                </div>
                <div class="form-body">
                    {% with messages = get_flashed_messages(with_categories=true) %}
                        {% if messages %}
                            {% for category, message in messages %}
                                <div class="alert alert-{{ 'danger' if category == 'error' else 'success' }} alert-dismissible fade show" role="alert">
                                    <i class="fas fa-{{ 'exclamation-triangle' if category == 'error' else 'check-circle' }} me-2"></i>
                                    {{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}

                    {% if form_mode == 'edit' %}
                    <div class="device-info-card">
                        <div class="info-item">
                            <span class="text-muted">{{ _('device_id_label') or _('device_serial_label') }}</span>
                            <span class="fw-semibold">{{ device.serial_number }}</span>
                        </div>
                    </div>
                    {% endif %}

                    <form method="POST">
                        <div class="form-group">
                            <label for="serial_number" class="form-label"><i class="fas fa-barcode"></i>{{ _('device_serial_label') }}</label>
                            <input type="text" class="form-control" id="serial_number" name="serial_number" value="{{ device.serial_number if device and device.serial_number else '' }}" required>
                        </div>

                        <div class="form-group">
                            <label for="device_name" class="form-label"><i class="fas fa-microchip"></i>{{ _('device_name_label') }}</label>
                            <input type="text" class="form-control" id="device_name" name="device_name" value="{{ device.device_name if device and device.device_name else '' }}" placeholder="{{ _('device_name_placeholder') }}" required>
                        </div>

                        <div class="form-group">
                            {% set dt_label = _('device_type_label') %}
                            <label for="device_type" class="form-label"><i class="fas fa-network-wired"></i>{{ 'Device Type (TCP Connection)' if dt_label == 'device_type_label' else dt_label }}</label>
                            <select class="form-select" id="device_type" name="device_type" required>
                                {% set opt_client = _('device_tcp_client') %}
                                {% set opt_server = _('device_tcp_server') %}
                                <option value="client" {{ (device and device.device_type == 'client') or form_mode == 'add' and 'selected' or '' }}>{{ 'TCP Client' if opt_client == 'device_tcp_client' else opt_client }}</option>
                                <option value="server" {{ device and device.device_type == 'server' and 'selected' or '' }}>{{ 'TCP Server' if opt_server == 'device_tcp_server' else opt_server }}</option>
                            </select>
                        </div>

                        <div class="form-group" id="ip_group">
                            <label for="ip_address" class="form-label"><i class="fas fa-globe"></i>{{ _('device_ip_label') }}</label>
                            <input type="text" class="form-control" id="ip_address" name="ip_address" value="{{ device.ip_address if device and device.ip_address else '' }}" placeholder="{{ _('device_ip_placeholder') }}">
                            {% if device and device.device_type == 'server' %}
                                <small class="text-muted mt-2 d-block"><i class="fas fa-info-circle me-1"></i>{{ _('server_ip_readonly') }}</small>
                            {% endif %}
                        </div>


                        <div class="d-grid gap-3 mt-4">
                            <button type="submit" class="btn btn-primary-modern btn-modern">
                                <i class="fas {{ form_mode == 'edit' and 'fa-save' or 'fa-plus' }} me-2"></i>{{ form_mode == 'edit' and _('update') or _('add_device') }}
                            </button>
                            {% if form_mode == 'edit' %}
                            <button type="button" class="btn btn-danger-modern btn-modern" onclick="confirmDelete()">
                                <i class="fas fa-trash me-2"></i>{{ _('delete') }}
                            </button>
                            {% endif %}
                            <a href="{{ url_for('devices') }}" class="btn btn-secondary-modern btn-modern">
                                <i class="fas fa-arrow-left me-2"></i>{{ _('back_to_devices') }}
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
    function confirmDelete() {
        if (confirm("{{ _('confirm_delete_device') if _('confirm_delete_device') else _('device_delete_error') }}")) {
            window.location.href = "{{ url_for('delete_user_device', device_id=(device.serial_number if device else '')) }}";
        }
    }
    
    // Hex input validation
    function validateHexInput(input) {
        // Remove any non-hex characters
        let value = input.value.replace(/[^A-Fa-f0-9]/g, '');
        
        // Convert to uppercase for consistency
        value = value.toUpperCase();
        
        // Update input value
        input.value = value;
        
        // Visual feedback
        if (value.length > 0 && !/^[A-F0-9]+$/.test(value)) {
            input.style.borderColor = 'var(--danger-color, #dc3545)';
            input.style.boxShadow = '0 0 0 0.2rem rgba(220, 53, 69, 0.25)';
        } else {
            input.style.borderColor = '#e9ecef';
            input.style.boxShadow = 'none';
        }
    }
    
    // IP alanını device_type'a göre göster/gizle
    function updateIpVisibility() {
        const typeSelect = document.getElementById('device_type');
        const ipGroup = document.getElementById('ip_group');
        const ipInput = document.getElementById('ip_address');
        if (!typeSelect || !ipGroup || !ipInput) return;
        if (typeSelect.value === 'server') {
            ipGroup.style.display = 'none';
            ipInput.disabled = true;
            ipInput.required = false;
            ipInput.value = '';
        } else {
            ipGroup.style.display = '';
            ipInput.disabled = false;
            ipInput.required = true;
        }
    }
    document.addEventListener('DOMContentLoaded', function() {
        const typeSelect = document.getElementById('device_type');
        if (typeSelect) {
            typeSelect.addEventListener('change', updateIpVisibility);
            updateIpVisibility();
        }
    });
    </script>
</body>
</html> 