{% extends "base.html" %}
{% block title %}OWASP BLT Chrome Extension{% endblock %}
{% block content %}
    <div class="container mx-auto px-4 py-8">
        <h1 class="text-3xl font-bold text-center text-gray-800 mb-8">OWASP BLT Chrome Extension</h1>
        <div class="bg-white shadow-md rounded-lg p-6 mb-8">
            <h2 class="text-2xl font-semibold text-gray-700 mb-4">Capture and Report Bugs with Ease</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-xl font-medium text-gray-600 mb-3">Bug Reporting Features</h3>
                    <ul class="list-disc pl-5 space-y-2 text-gray-600">
                        <li>Take screenshots of bugs directly from your browser</li>
                        <li>Annotate and highlight issues in the screenshots</li>
                        <li>Automatically capture browser and system information</li>
                        <li>Submit bugs to OWASP BLT with a single click</li>
                        <li>Track your submitted bugs and their status</li>
                    </ul>
                </div>
                {% comment %} <div class="flex justify-center items-center">
                <img src="https://raw.githubusercontent.com/OWASP-BLT/BLT-Extension/main/images/demo.png" alt="Bug reporting screenshot" class="max-w-full h-auto rounded-lg shadow-sm">
                </div> {% endcomment %}
            </div>
        </div>
        <div class="bg-white shadow-md rounded-lg p-6 mb-8">
            <h2 class="text-2xl font-semibold text-gray-700 mb-4">Job Application Tracker</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="flex justify-center items-center">
                    <embed src="https://github.com/user-attachments/assets/da337d3e-63af-41c8-97ff-351fe9e6b2c4"
                           type="video/mp4">
                </div>
                <div>
                    <h3 class="text-xl font-medium text-gray-600 mb-3">Keep Your Job Search Organized</h3>
                    <ul class="list-disc pl-5 space-y-2 text-gray-600">
                        <li>Track job applications in one convenient place</li>
                        <li>Save job postings with company information</li>
                        <li>Monitor application status (applied, interviewing, offered, etc.)</li>
                        <li>Set reminders for follow-ups and interviews</li>
                        <li>Store notes and feedback from each application</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="bg-white shadow-md rounded-lg p-6">
            <h2 class="text-2xl font-semibold text-gray-700 mb-4">Installation</h2>
            <div class="flex flex-col items-center">
                <p class="text-gray-600 mb-6 text-center">
                    Get the OWASP BLT Chrome Extension from the Chrome Web Store. It's free and open source!
                </p>
                <a href="https://github.com/OWASP-BLT/BLT-Extension"
                   target="_blank"
                   rel="noopener noreferrer"
                   class="bg-[#e74c3c] hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 ease-in-out flex items-center">
                    <svg class="w-6 h-6 mr-2"
                         fill="currentColor"
                         viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zM7.291 4.947l4.705 4.706-4.706 4.706-1.414-1.414 3.291-3.292-3.29-3.292 1.414-1.414zm4.706 14.108-4.705-4.706 4.706-4.706 1.414 1.414-3.291 3.292 3.29 3.292-1.414 1.414z" />
                    </svg>
                    Install Extension
                </a>
                <div class="mt-6">
                    <p class="text-gray-500 text-center">Want to contribute or report issues?</p>
                    <div class="flex justify-center mt-2">
                        <a href="https://github.com/OWASP-BLT/BLT-Extension"
                           target="_blank"
                           rel="noopener noreferrer"
                           class="text-gray-600 hover:text-[#e74c3c] transition duration-300 ease-in-out flex items-center">
                            <svg class="w-5 h-5 mr-1"
                                 fill="currentColor"
                                 viewBox="0 0 24 24"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                            </svg>
                            GitHub Repository
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}