{% extends "base.html" %}

{% block title %}PWA Installation Test - Dukaribu{% endblock %}

{% block styles %}
<style>
    .test-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .test-row {
        display: flex;
        flex-wrap: wrap;
        padding: 12px;
        border-bottom: 1px solid #eee;
        margin-bottom: 8px;
    }

    .test-row.success .test-result {
        color: #198754;
        font-weight: bold;
    }

    .test-row.failure .test-result {
        color: #dc3545;
        font-weight: bold;
    }

    .test-name {
        flex: 1;
        font-weight: 500;
    }

    .test-result {
        width: 80px;
        text-align: center;
    }

    .test-details {
        flex-basis: 100%;
        margin-top: 8px;
        font-size: 0.9rem;
        color: #6c757d;
        padding-left: 20px;
    }

    .install-section {
        margin-top: 30px;
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 8px;
        text-align: center;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="test-container">
        <h1 class="mb-4">PWA Installation Test</h1>
        <p class="lead mb-4">This page tests if your Progressive Web App (PWA) is properly configured for installation.</p>

        <div id="pwa-test-results">
            <!-- Test results will be added here by JavaScript -->
        </div>

        <div class="install-section">
            <h3>Manual Installation</h3>
            <p>If your browser supports PWA installation, you can install the app using the button below:</p>
            <button id="manual-install-button" class="btn btn-primary d-none">
                <i class="bi bi-download me-2"></i>Install App
            </button>
            <div id="install-instructions" class="mt-3">
                <p class="text-muted">If the install button doesn't appear, you can try:</p>
                <ul class="text-start text-muted">
                    <li>On Chrome/Edge: Click the menu (⋮) > Install app</li>
                    <li>On Safari (iOS): Click the share button > Add to Home Screen</li>
                </ul>
            </div>
        </div>

        <div class="troubleshooting-section mt-4 p-3 bg-light border rounded">
            <h3>Troubleshooting</h3>
            <p>If you're having issues with the service worker or PWA installation, try these options:</p>

            <div class="d-flex flex-wrap gap-2 mb-3">
                <button id="register-sw-button" class="btn btn-outline-primary">
                    <i class="bi bi-arrow-repeat me-1"></i>Register Service Worker
                </button>
                <button id="clear-cache-button" class="btn btn-outline-danger">
                    <i class="bi bi-trash me-1"></i>Clear Cache
                </button>
                <button id="reload-page-button" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-clockwise me-1"></i>Reload Page
                </button>
            </div>

            <div id="troubleshooting-result" class="alert alert-info d-none">
                <!-- Results will be shown here -->
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/pwa-test.js') }}"></script>
<script src="{{ url_for('static', filename='js/app.js') }}" type="module"></script>
{% endblock %}