{% extends "base.html" %}
{% load static %}
{% load gravatar %}
{% load socialaccount %}
{% load humanize %}
{% providers_media_js %}
{% load i18n %}
f
{% block content %}
    {% load custom_tags %}
    <script src="{% static 'js/jquery.validate.js' %}"></script>
    <script src="{% static 'js/activity.js' %}"></script>
    <style>
        .bottom-right {
            position: absolute;
            bottom: 10px;
            right: 15px;
          }    
    </style>
    <div class="row mt-[60px] ml-[10px]"
         data-intro="View latest activities here."
         data-step="3">
        <div class="col-md-8">
            <h1 class="page-sub-header">{% trans "Latest activity" %}</h1>
            <div class="list-group">
                {% for activity in activities %}
                    {% include "_activity.html" %}
                {% endfor %}
            </div>
            <a href="{% url 'all_activity' %}" class="btn btn-default btn-block">{% trans "View All Activity" %}</a>
        </div>
        <div class="col-md-4">
            <div class="row">
                <div class="panel panel-default">
                    <div class="panel-heading page-sub-header">{% now "F" %} {% trans "Leaderboard" %}</div>
                    <br>
                    <div class="panel-body leaderboard-panel">
                        <strong>{% trans "The 1st Place Hunter for" %} {% now "F" %} {% trans "will receive" %}</strong>
                        <div class="box leaderboardbox">
                            <strong>{% trans "No sponsored prizes this month" %}</strong>
                        </br>
                        <button href="{% url 'sponsor' %}"
                                class="bg-red-500 text-white px-4 py-2 rounded text-xl border border-[#ac2925] hover:bg-[#c9302c] hover:border-[#761c19]">
                            {% trans "Sponsor a Prize" %}
                        </button>
                    </div>
                </div>
                <div class="list-group">
                    {% if leaderboard %}
                        {% for leader in leaderboard %}
                            <div class="list-group-item activity-strip flex overflow-hidden h-[80px] border-1 border-gray-300">
                                <span class="h-full w-1/3 flex justify-center items-center">
                                    {% if leader.userprofile.avatar %}
                                        <img src="{{ leader.userprofile.avatar }}"
                                             class="profileimage"
                                             alt="Profile Image"
                                             width="50"
                                             height="50">
                                    {% elif user.socialaccount_set.all.0.get_avatar_url %}
                                        <img src="{{ leader.socialaccount_set.all.0.get_avatar_url }}"
                                             class="profileimage"
                                             alt="Profile Image"
                                             width="50"
                                             height="50">
                                    {% else %}
                                        <img src="{% gravatar_url leader.email 50 %}"
                                             class="profileimage"
                                             alt="Profile Image"
                                             width="50"
                                             height="50">
                                    {% endif %}
                                </span>
                                <span class="h-full w-2/3 flex flex-col items-center justify-center  overflow-hidden">
                                    <a href="{% url 'profile' slug=leader.username %}"
                                       class="text-capitalize w-full h-1/2 font-bold text-2xl">{{ leader.username|truncatechars:20 }}</a>
                                    <span class=" w-full h-1/2 flex justify-start items-center gap-3">
                                        <div class="badge ">{{ leader.total_score }} {% trans "Points" %}</div>
                                        <span class="label label-success">{{ forloop.counter|ordinal }}</span>
                                    </span>
                                </span>
                            </div>
                        {% endfor %}
                    {% else %}
                    </br>
                    {% trans "Leaderboard reset for" %} {% now "F" %}. {% trans "Be first to find issues" %}!
                {% endif %}
            </div>
            <a href="{% url 'leaderboard_global' %}"
               class="btn btn-default btn-block submit_button">{% trans "View All" %}</a>
            <a href="{% url 'leaderboard_specific_month' %}"
               class="btn btn-default btn-block submit_button">{% trans "Filter Monthly" %}</a>
            <a href="{% url 'leaderboard_eachmonth' %}"
               class="btn btn-default btn-block submit_button">{% trans "View Monthly" %}</a>
        </div>
    </div>
</div>
</div>
<div class="w-full h-[30rem] flex flex-col  space-y-14 items-center">
    <p class="text-5xl text-center mt-20 font-sans sm:text-6xl lg:text-7xl">
        {% trans "Find Bugs, Win Points and Prizes" %}
    </p>
    <hr class="w-full bg-black" />
    <section class="hero">
        <div class="text-slider">
            <ul>
                <li class="text-slider-list">
                    <h2 class="text-slider-line active-line animated fadeInUp text-4xl">
                        {% trans "Fix issues on websites, apps or hardware (+3 points)" %}
                    </h2>
                </li>
                <li class="text-slider-list">
                    <h2 class="text-slider-line animated fadeInUp text-4xl">{% trans "Verify other bug reports(+2 points)" %}</h2>
                </li>
                <li class="text-slider-list">
                    <h2 class="text-slider-line animated fadeInUp text-4xl">
                        {% trans "Invite friends (when they signup , get +1 point)" %}
                    </h2>
                </li>
                <li class="text-slider-list">
                    <h2 class="text-slider-line animated fadeInUp text-4xl">{% trans "Find a bug on a new site or app (+4 points)" %}</h2>
                </li>
            </ul>
        </div>
    </section>
</div>
<div class="w-full m-0 p-0 flex flex-wrap justify-center">
    <div class="border-2 w-[350px] m-5 py-5 h-[250px] rounded-lg flex flex-col items-center justify-around">
        <i class="fa fa-exclamation-triangle fa-3x mt-5"></i>
        <p class="text-3xl font-bold">{% trans "Number Error" %}</p>
        <p class="w-1/2 text-center">{% trans "For pages where you see a number 404, 500." %}</p>
        <button onclick="example('/search/?query=1&type=label')"
                class="border-2 border-gray-400 px-14 py-2 transform hover:translate-y-0.5 hover:shadow-lg">
            {% trans "Examples" %}
        </button>
    </div>
    <div class="border-2 w-[350px] m-5 py-5 h-[250px] rounded-lg flex flex-col items-center justify-around">
        <i class="fa fa-trophy fa-3x mt-5"></i>
        <p class="text-3xl font-bold">{% trans "Functional" %}</p>
        <p class="w-1/2 text-center">{% trans "Something doesn't work as intended" %}</p>
        <button onclick="example('/search/?query=2&type=label')"
                class="border-2 border-gray-400 px-14 py-2 transform hover:translate-y-0.5 hover:shadow-lg">
            {% trans "Examples" %}
        </button>
    </div>
    <div class="border-2 w-[350px] m-5 py-5 h-[250px] rounded-lg flex flex-col items-center justify-around">
        <i class="fa fa-flash fa-3x mt-5"></i>
        <p class="text-3xl font-bold">{% trans "Performance" %}</p>
        <p class="w-1/2 text-center">{% trans "Any process that takes over 5 seconds." %}</p>
        <button onclick="example('/search/?query=3&type=label')"
                class="border-2 border-gray-400 px-14 py-2 transform hover:translate-y-0.5 hover:shadow-lg">
            {% trans "Examples" %}
        </button>
    </div>
    <div class="border-2 w-[350px] m-5 py-5 h-[250px] rounded-lg flex flex-col items-center justify-around">
        <i class="fa fa-flash fa-3x mt-5"></i>
        <p class="text-3xl font-bold">{% trans "Security" %}</p>
        <p class="w-1/2 text-center">{% trans "Data leaks, exploits or anything smelly." %}</p>
        <button onclick="example('/search/?query=4&type=label')"
                class="border-2 border-gray-400 px-14 py-2 transform hover:translate-y-0.5 hover:shadow-lg">
            {% trans "Examples" %}
        </button>
    </div>
    <div class="border-2 w-[350px] m-5 py-5 h-[250px] rounded-lg flex flex-col items-center justify-around">
        <i class="fa fa-flash fa-3x mt-5"></i>
        <p class="text-3xl font-bold">{% trans "Typo" %}</p>
        <p class="w-1/2 text-center">{% trans "Miss-spellings, miss-grammar and more." %}</p>
        <button onclick="example('/search/?query=5&type=label')"
                class="border-2 border-gray-400 px-14 py-2 transform hover:translate-y-0.5 hover:shadow-lg">
            {% trans "Examples" %}
        </button>
    </div>
    <div class="border-2 w-[350px] m-5 py-5 h-[250px] rounded-lg flex flex-col items-center justify-around">
        <i class="fa fa-flash fa-3x mt-5"></i>
        <p class="text-3xl font-bold">{% trans "Design" %}</p>
        <p class="w-1/2 text-center">{% trans "Layout, responsiveness and improvements" %}</p>
        <button onclick="example('/search/?query=6&type=label')"
                class="border-2 border-gray-400 px-14 py-2 transform hover:translate-y-0.5 hover:shadow-lg">
            {% trans "Examples" %}
        </button>
    </div>
    <div class="border-2 w-[350px] m-5 py-5 h-[250px] rounded-lg flex flex-col items-center justify-around">
        <i class="fa fa-flash fa-3x mt-5"></i>
        <p class="text-3xl font-bold">{% trans "Server Down" %}</p>
        <p class="w-1/2 text-center">{% trans "500 Server Error and Downtime" %}</p>
        <button onclick="example('/search/?query=7&type=label')"
                class="border-2 border-gray-400 px-14 py-2 transform hover:translate-y-0.5 hover:shadow-lg">
            {% trans "Examples" %}
        </button>
    </div>
</div>
<div class="w-full min-h-[200px] mt-[60px] flex justify-center">
    <div class="w-[80%] h-full">
        <div class="w-full mt-5 flex flex-wrap items-center justify-around">
            <div class="w-full lg:w-[200px] h-[55px] bg-blue-600 flex justify-center items-center rounded-md m-4">
                <p class="text-white text-3xl">
                    <i class="fa fa-bug"></i> {{ bug_count }} {% trans "Bugs" %}
                </p>
            </div>
            <div class="w-full lg:w-[200px] h-[55px] bg-green-600 flex justify-center items-center rounded-md m-4">
                <p class="text-white text-3xl">
                    <i class="fa fa-user"></i> {{ user_count }} {% trans "Users" %}
                </p>
            </div>
            <div class="w-full lg:w-[200px] h-[55px] bg-yellow-600 flex justify-center items-center rounded-md m-4">
                <p class="text-white text-3xl">
                    <i class="fa fa-bullseye"></i> {{ hunt_count }} {% trans "Hunts" %}
                </p>
            </div>
            <div class="w-full lg:w-[200px] h-[55px] bg-red-600 flex justify-center items-center rounded-md m-4">
                <p class="text-white text-3xl">
                    <i class="fa fa-support"></i> {{ domain_count }} {% trans "Domains" %}
                </p>
            </div>
        </div>
    </div>
</div>
{% if ended_hunts %}
    <p class="text-7xl text-center mb-8 font-sans text-[#B1B1B1]">{% trans "ENDED HUNTS" %}</p>
    <div class="w-full flex justify-center">
        <a href="{% url 'index' %}"
           class="px-8 py-3 bg-red-500 rounded-lg text-center text-white font-bold text-2xl">{% trans "View Ongoing Hunts" %}</a>
    </div>
{% else %}
    <p class="text-7xl text-center mb-8 font-sans text-[#B1B1B1]">{% trans "LATEST HUNTS" %}</p>
    <div class="w-full flex justify-center">
        <button href="/?latest_hunts=ended"
                class="px-8 py-3 bg-red-500 rounded-lg text-center text-white font-bold text-2xl">
            {% trans "View Ended Hunts" %}
        </button>
    </div>
{% endif %}
<div class="flex items-center flex-wrap w-full justify-between mb-[100px] mt-20 sm:justify-center ">
    {% if top_hunts %}
        {% for hunt in top_hunts %}
            <div class="flex justify-between flex-col md:flex-row w-[700px] min-h-[200px] m-5 rounded-lg overflow-hidden bg-gray-700 p-[1px]">
                <div class="w-full md:w-10 bg-gray-700 flex items-center justify-center  md:rotate-180">
                    <p class="text-white  md:rotate-90 font-bold text-2xl tracking-widest">{% trans "LATEST" %}</p>
                </div>
                <div class="flex w-full min-h-full bg-white">
                    <div class="flex h-full items-center">
                        <div class="w-[250px] h-[200px] p-5">
                            <img src="{{ server_url }}/media/{{ hunt.logo }}"
                                 class="w-full h-full object-fill"
                                 alt="Bughunt Logo"
                                 width="auto"
                                 height="auto">
                        </div>
                    </div>
                    <div class="flex flex-col w-[70%] h-full pt-7">
                        <p class="text-black text-4xl font-semibold">{{ hunt.name }}</p>
                        <div class="flex flex-col justify-between h-1/2  mt-10">
                            <div class="flex flex-col md:flex-row md:justify-between">
                                <div class="md:mt-0 w-full py-3 mr-4 rounded-lg flex items-center">
                                    <i class="fa-solid fa-calendar-days text-3xl mr-6 text-gray-600"></i>
                                    <p class="text-black font-semibold">
                                        {{ hunt.starts_on|date:"F" }} {{ hunt.starts_on__day }} {{ hunt.starts_on__year }} - {{ hunt.end_on|date:"F" }} {{ hunt.end_on__day }} {{ hunt.end_on__year }}
                                    </p>
                                </div>
                            </div>
                            <div class="flex flex-col md:flex-row md:justify-between">
                                <div class="w-full rounded-lg flex items-center">
                                    <i class="fa-solid fa-globe text-3xl mr-5 text-gray-600"></i>
                                    <a href="{{ hunt.url }}" class="text-black font-semibold">{{ hunt.url }}</a>
                                </div>
                            </div>
                            <div class="flex flex-col md:flex-row md:justify-between">
                                <div class="w-full py-3 rounded-lg flex items-center">
                                    <i class="fa-solid fa-dollar-sign text-3xl mr-8 text-gray-600"></i>
                                    <p class="text-black font-semibold">{{ hunt.total_prize }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="flex w-full mt-5 mb-10">
                            <a href="{% url 'show_bughunt' hunt.id %}"
                               class="mt-3 md:mt-0 w-full md:w-full py-3 mr-4 bg-red-500 rounded-lg flex items-center justify-center hover:bg-red-700">
                                <p class="text-white font-semibold">MORE INFO</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    {% else %}
        <div class="w-full flex justify-center">
            <p class="text-red-500">{% trans "No ongoing hunt's found" %}.</p>
        </div>
    {% endif %}
</div>
<p class="text-7xl text-center mb-[100px] font-sans text-[#B1B1B1]">{% trans "LEADER BOARDS" %}</p>
<div class="w-full flex flex-wrap justify-around">
    <div class="w-[500px] h-full border-[1px] border-gray-400 rounded-sm bg-white mx-2 mb-10">
        <div class="w-full h-[80px]  flex justify-center items-center">
            <p class="text-5xl font-bold">{% trans "TOP COMPANY" %}</p>
        </div>
        <div class="w-full">
            {% for company in top_companies %}
                <div class="w-full h-[75px] border-y-[1.1px] px-6 border-gray-300 flex justify-between items-center cursor-pointer shadow-sm transform hover:-translate-y-1 hover:shadow-lg">
                    <p class="text-3xl font-bold">{{ forloop.counter }}</p>
                    <div class="w-[50%] h-[100%] flex flex-col justify-center">
                        <p class="font-bold text-3xl text-left">{{ company.domain__name }}</p>
                        <p class="text-2xl mt-2">{{ company.count }}</p>
                    </div>
                    <a class="bg-red-500 text-white font-bold text-2xl px-9 py-4 hover:no-underline hover:text-white"
                       href="{% url 'domain' slug=company.domain__name %}">{% trans "SUBMIT A BUG" %}</a>
                </div>
            {% endfor %}
        </div>
    </div>
    <div class="w-[500px] h-full border-[1px] border-gray-400 rounded-sm bg-white mx-2 mb-10">
        <div class="w-full h-[80px]  flex justify-center items-center">
            <p class="text-5xl font-bold">{% trans "TOP TESTER" %}</p>
        </div>
        <div class="w-full">
            {% for tester in top_testers %}
                <div class="w-full h-[75px] border-y-[1.1px] px-6 border-gray-300 flex justify-between items-center cursor-pointer shadow-sm transform hover:-translate-y-1 hover:shadow-lg">
                    <p class="text-3xl font-bold">{{ forloop.counter }}</p>
                    <div class="w-[50%] h-[100%] flex flex-col justify-center">
                        <p class="font-bold text-3xl text-left">{{ tester.user__username }}</p>
                        <p class="text-2xl mt-2">{{ tester.count }}</p>
                    </div>
                    <a class="bg-red-500 text-white font-bold text-2xl px-9 py-4 hover:no-underline hover:text-white"
                       href="{% url 'profile' slug=tester.user__username %}">{% trans "VIEW PROFILE" %}</a>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-sub-header">
            {% env 'PROJECT_NAME' %} is 100% {% trans "free to use" %}, {% trans "Open Source and a non-commercial" %}, {% trans "not for profit initiative" %}.
        </h1>
    </div>
</div>
<div class="bottom-right">
    <a href="https://github.com/OWASP-BLT/BLT/blob/main/website/templates/index .html">
        <i class="fab fa-github"></i>
    </a>
    <a href="https://www.figma.com/file/s0xuxeU6O2guoWEfA9OElZ/Design?node-id=340%3A209&t=3CLUaUp9CEZj9ASY-1">
        <i class="fab fa-figma"></i>
    </a>
</div>
<script>
    function example(relative_path){
        window.location.href = relative_path;
    }
</script>
{% endblock content %}