<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}SwiftPOS{% endblock %}</title>
    <meta name="description" content="{% block meta_description %}SwiftPOS — Fast. Simple. Clear. Nigeria's smartest POS system.{% endblock %}">
    <link rel="icon" type="image/x-icon" href="{% load static %}{% static 'core/icons/favicon.ico' %}">

    <!-- Inter + Outfit Fonts (SaaS Modern) -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@700;800;900&display=swap" rel="stylesheet">
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- SwiftPOS Public CSS -->
    <link rel="stylesheet" href="{% load static %}{% static 'css/style.css' %}?v=12">
    <link rel="stylesheet" href="{% static 'css/public.css' %}?v=1">

    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- NAV -->
    <nav class="sp-nav">
        <a href="/" class="sp-logo">
            {% load static %}
            <div class="sp-logo-icon"><i class="fas fa-bolt"></i></div>
            <span class="sp-logo-text">Swift<span>POS</span></span>
        </a>
        <ul class="sp-nav-links d-none d-md-flex">
            <li><a href="/pricing/">Pricing</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <div class="sp-nav-cta">
            <a href="/accounts/login/" class="btn-sp-outline"><i class="fas fa-sign-in-alt"></i> Log In</a>
            <a href="/register/" class="btn-sp-primary"><i class="fas fa-rocket"></i> Get Started Free</a>
        </div>
    </nav>

    <!-- MESSAGES -->
    {% if messages %}
    <div class="container-fluid px-4 mt-3">
        {% for message in messages %}
        <div class="sp-alert-bar sp-alert-{{ message.tags|default:'info' }}">
            <i class="fas {% if 'success' in message.tags %}fa-check-circle{% elif 'error' in message.tags or 'danger' in message.tags %}fa-exclamation-circle{% elif 'warning' in message.tags %}fa-exclamation-triangle{% else %}fa-info-circle{% endif %}"></i>
            {{ message }}
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <!-- CONTENT -->
    {% block content %}{% endblock %}

    <!-- FOOTER -->
    <footer class="sp-footer">
        <p>&copy; {% now "Y" %} SwiftPOS. All rights reserved. &nbsp;|&nbsp;
        <a href="/pricing/">Pricing</a> &nbsp;|&nbsp;
        <a href="/register/">Get Started</a></p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    {% block extra_js %}{% endblock %}
</body>
</html>
