{% extends "base.html" %}
{% block style %}
    <style type="text/tailwindcss">
    @layer components {
      .card {
        @apply flex items-center justify-center flex-col gap-2 p-5 w-full sm:w-72 h-full bg-gray-100 border rounded-2xl;
      }
    }
    </style>
    <!--Tailwind CSS-->
    <!--Font-Awesome-->
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
          integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
          crossorigin="anonymous"
          referrerpolicy="no-referrer" />
{% endblock style %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="container py-8 min-h-[100vh]">
        <div class="flex flex-col text-center gap-4 mb-10 p-4">
            <div class="w-[full] h-max flex flex-col items-center">
                <p class="text-7xl mb-5 font-bold">Meet our Community Members</p>
                <p class="text-xl bg-red-600 text-white w-max px-5 py-2 rounded-lg lg:text-4xl">
                    A warm and welcoming collection of open sourcers
                </p>
            </div>
        </div>
        <div class="flex items-center justify-center flex-wrap gap-4 p-4">
            {% for contributor in contributors %}
                <div class="group card w-[250px] h-[400px] m-5 flex flex-col items-center justify-between hover:bg-red-600 transition duration-200">
                    <img src="{{ contributor.img }}"
                         class="w-[100px] h-[100px] mb-3 rounded-full object-cover transition duration-200 group-hover:scale-110"
                         width="100px"
                         height="100px"
                         alt="contributor image" />
                    <div class="transition duration-200 group-hover:text-white text-gray-900 text-4xl font-bold">
                        {{ contributor.name }}
                    </div>
                    <div class="transition duration-200 group-hover:text-purple-800  text-purple-600 text-2xl">
                        {{ contributor.location }}
                    </div>
                    <p class="transition duration-200 group-hover:text-white text-gray-600 text-center px-10">
                        {{ contributor.short_description }}
                    </p>
                    <div class="group-hover:text-white flex items-center justify-center gap-3 mt-2 w-auto h-5 text-gray-600 mt-7">
                        <a href="{{ contributor.twitter }}"
                           target="_blank"
                           rel="noopener noreferrer">
                            <i class="group-hover:text-white scale-150 m-3 fa-brands fa-x-twitter fa-lg cursor-pointer transition duration-200 hover:text-gray-400">
                            </i>
                        </a>
                        <a href="{{ contributor.linkedin }}"
                           target="_blank"
                           rel="noopener noreferrer">
                            <i class="group-hover:text-white scale-150 m-3 fa-brands fa-linkedin fa-lg cursor-pointer transition duration-200 hover:text-gray-400"></i>
                        </a>
                        <a href="{{ contributor.website }}"
                           target="_blank"
                           rel="noopener noreferrer">
                            <i class="group-hover:text-white scale-150 m-3 fa-brands fa-dribbble fa-lg cursor-pointer transition duration-200 hover:text-gray-400"></i>
                        </a>
                    </div>
                    <a href="{% url 'contributors' %}?contributor={{ contributor.id }}"
                       class="w-[150px] h-[40px] rounded-md shadow-md bg-red-500 text-white flex justify-center items-center mt-10 no-underline hover:text-white group-hover:bg-white group-hover:text-red-500 font-bold">More Info</a>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock content %}