{% extends "base.html" %}
{% load static %}
{% block title %}
    How to Use Sizzle
{% endblock title %}
{% block description %}
    A comprehensive guide on how to use Sizzle. Learn how to download the app, log in, and start tracking your work time efficiently.
{% endblock description %}
{% block keywords %}
    How to Use Sizzle, Sizzle Guide, Sizzle Instructions, Download Sizzle, Time Tracking, Sizzle Tutorial
{% endblock keywords %}
{% block og_title %}
    How to Use Sizzle - Your Comprehensive Guide
{% endblock og_title %}
{% block og_description %}
    Follow this step-by-step guide to download and use the Sizzle app. Learn how to track your work time efficiently with Sizzle.
{% endblock og_description %}
{% block content %}
    <div class="container mx-auto p-6">
        <!-- Include the left navigation -->
        {% include "includes/sidenav.html" %}
        <!-- Main Content Section -->
        <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-8">
            <h1 class="text-center text-3xl font-bold text-gray-800 mb-8">How to Use Sizzle</h1>
            <div class="space-y-8">
                <!-- Step 1 -->
                <div class="flex flex-col md:flex-row items-center bg-gray-50 p-6 rounded-lg">
                    <div class="flex-1">
                        <div class="text-2xl font-bold text-blue-600 mb-2">Step 1</div>
                        <div class="text-xl font-semibold text-gray-800 mb-4">Download the App</div>
                        <p class="text-gray-600">
                            To get started, download the app from GitHub using the following link:
                            <a href="https://github.com/OWASP-BLT/BLT-Flutter/actions/workflows/build-flutter.yml"
                               target="_blank"
                               class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition duration-300">
                                Click Here
                            </a>
                        </p>
                    </div>
                </div>
                <!-- Step 2 -->
                <div class="flex flex-col md:flex-row items-center bg-gray-50 p-6 rounded-lg">
                    <div class="flex-1">
                        <div class="text-2xl font-bold text-blue-600 mb-2">Step 2</div>
                        <div class="text-xl font-semibold text-gray-800 mb-4">Find the Latest Successful Build</div>
                        <p class="text-gray-600">Locate the most recent successful build and click on it to proceed with the download.</p>
                    </div>
                    <img src="{% static 'img/sizzle/app_finding_1.jpg' %}"
                         alt="Finding the App on GitHub Actions"
                         height="200"
                         width="200"
                         class="w-48 h-auto rounded-lg shadow-md cursor-pointer hover:scale-105 transition-transform">
                </div>
                <!-- Step 3 -->
                <div class="flex flex-col md:flex-row items-center bg-gray-50 p-6 rounded-lg">
                    <div class="flex-1">
                        <div class="text-2xl font-bold text-blue-600 mb-2">Step 3</div>
                        <div class="text-xl font-semibold text-gray-800 mb-4">Download the App for Your Device</div>
                        <p class="text-gray-600">Select the appropriate version of the app for your device and download it.</p>
                    </div>
                    <img src="{% static 'img/sizzle/app_finding_2.jpg' %}"
                         alt="Choosing Device Version to Download"
                         height="200"
                         width="200"
                         class="w-48 h-auto rounded-lg shadow-md cursor-pointer hover:scale-105 transition-transform">
                </div>
                <!-- Step 4 -->
                <div class="flex flex-col md:flex-row items-center bg-gray-50 p-6 rounded-lg">
                    <div class="flex-1">
                        <div class="text-2xl font-bold text-blue-600 mb-2">Step 4</div>
                        <div class="text-xl font-semibold text-gray-800 mb-4">Open the App and Login</div>
                        <p class="text-gray-600">Once downloaded, open the app and login using your credentials.</p>
                    </div>
                    <img src="{% static 'img/sizzle/running_sizzle_1.jpg' %}"
                         alt="Logging into the App"
                         height="200"
                         width="200"
                         class="w-48 h-auto rounded-lg shadow-md cursor-pointer hover:scale-105 transition-transform">
                </div>
                <!-- Step 5 -->
                <div class="flex flex-col md:flex-row items-center bg-gray-50 p-6 rounded-lg">
                    <div class="flex-1">
                        <div class="text-2xl font-bold text-blue-600 mb-2">Step 5</div>
                        <div class="text-xl font-semibold text-gray-800 mb-4">Access the Side Menu and Click "Sizzle"</div>
                        <p class="text-gray-600">Open the side menu and tap on the "Sizzle" button to continue.</p>
                    </div>
                    <img src="{% static 'img/sizzle/running_sizzle_2.jpg' %}"
                         alt="Accessing Side Menu"
                         height="200"
                         width="200"
                         class="w-48 h-auto rounded-lg shadow-md cursor-pointer hover:scale-105 transition-transform">
                </div>
                <!-- Step 6 -->
                <div class="flex flex-col md:flex-row items-center bg-gray-50 p-6 rounded-lg">
                    <div class="flex-1">
                        <div class="text-2xl font-bold text-blue-600 mb-2">Step 6</div>
                        <div class="text-xl font-semibold text-gray-800 mb-4">Enter Your GitHub Username</div>
                        <p class="text-gray-600">Enter your GitHub username in the provided field and click "Add Username".</p>
                    </div>
                    <img src="{% static 'img/sizzle/running_sizzle_3.jpg' %}"
                         alt="Entering GitHub Username"
                         height="200"
                         width="200"
                         class="w-48 h-auto rounded-lg shadow-md cursor-pointer hover:scale-105 transition-transform">
                </div>
                <!-- Step 7 -->
                <div class="flex flex-col md:flex-row items-center bg-gray-50 p-6 rounded-lg">
                    <div class="flex-1">
                        <div class="text-2xl font-bold text-blue-600 mb-2">Step 7</div>
                        <div class="text-xl font-semibold text-gray-800 mb-4">Start Time Tracking</div>
                        <p class="text-gray-600">Click on the "Start Work" button to begin tracking your work time.</p>
                    </div>
                    <img src="{% static 'img/sizzle/running_sizzle_4.jpg' %}"
                         alt="Starting Time Tracking"
                         height="200"
                         width="200"
                         class="w-48 h-auto rounded-lg shadow-md cursor-pointer hover:scale-105 transition-transform">
                </div>
                <!-- Step 8 -->
                <div class="flex flex-col md:flex-row items-center bg-gray-50 p-6 rounded-lg">
                    <div class="flex-1">
                        <div class="text-2xl font-bold text-blue-600 mb-2">Step 8</div>
                        <div class="text-xl font-semibold text-gray-800 mb-4">View and Select Assigned Issues</div>
                        <p class="text-gray-600">
                            All assigned issues will be displayed here. Select any task to begin working and click on the "Run" button to start tracking time for that task.
                        </p>
                    </div>
                    <img src="{% static 'img/sizzle/running_sizzle_5.jpg' %}"
                         alt="Viewing and Selecting Tasks"
                         height="200"
                         width="200"
                         class="w-48 h-auto rounded-lg shadow-md cursor-pointer hover:scale-105 transition-transform">
                </div>
                <!-- Step 9 -->
                <div class="flex flex-col md:flex-row items-center bg-gray-50 p-6 rounded-lg">
                    <div class="flex-1">
                        <div class="text-2xl font-bold text-blue-600 mb-2">Step 9</div>
                        <div class="text-xl font-semibold text-gray-800 mb-4">Track Time for the Task</div>
                        <p class="text-gray-600">
                            Congratulations! You are now tracking time for the selected task. Click on the "Stop" button to stop tracking once completed.
                        </p>
                    </div>
                    <img src="{% static 'img/sizzle/running_sizzle_6.jpg' %}"
                         alt="Tracking Time for Selected Task"
                         height="200"
                         width="200"
                         class="w-48 h-auto rounded-lg shadow-md cursor-pointer hover:scale-105 transition-transform">
                </div>
                <!-- Step 10 -->
                <div class="flex flex-col md:flex-row items-center bg-gray-50 p-6 rounded-lg">
                    <div class="flex-1">
                        <div class="text-2xl font-bold text-blue-600 mb-2">Step 10</div>
                        <div class="text-xl font-semibold text-gray-800 mb-4">View Total Time Spent</div>
                        <p class="text-gray-600">
                            After stopping the timer, you can view the total time spent on the task on the "Sizzle" page of the website.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Image Modal -->
    <div class="fixed inset-0 bg-black bg-opacity-80 hidden justify-center items-center z-50"
         id="imageModal">
        <div class="relative">
            <button class="absolute top-4 right-4 bg-white rounded-full p-2 text-gray-800 hover:bg-gray-200 transition duration-300"
                    id="closeModal">×</button>
            <img src=""
                 alt="Expanded Image"
                 id="modalImage"
                 height="600"
                 width="800"
                 class="max-w-full max-h-screen rounded-lg">
        </div>
    </div>
    <script>
        const images = document.querySelectorAll('img');
        const modal = document.getElementById('imageModal');
        const modalImage = document.getElementById('modalImage');
        const closeModal = document.getElementById('closeModal');
        images.forEach(image => {
            image.addEventListener('click', () => {
                modal.classList.remove('hidden');
                modalImage.src = image.src;
            });
        });
        closeModal.addEventListener('click', () => {
            modal.classList.add('hidden');
        });
        window.addEventListener('click', (e) => {
            if (e.target === modal) {
                modal.classList.add('hidden');
            }
        });
    </script>
{% endblock content %}