{% extends 'base.html' %}
{% load i18n %}
{% load static carer_tags %}

{% block title %}{% trans "Quizzer Start" %}{% endblock %}

{% block content %}
<section class="intro overflow-hidden">

    <div class="w-full mt-5 rounded-md border-2 border-[#E0E3EE] p-5 pb-0 text-center">
        <img
            class="w-20 h-20 rounded-full mx-auto mb-2"
            src="https://placehold.co/80"
            alt="img"
        />
        <h2 class="text-[23px] md:text-[27px] font-bold leading-tight md:leading-tight">
            Aaron Jack
        </h2>
        <p class="text-[16px] md:text-[18px] leading-normal md:leading-normal">
            Horizon Care
        </p>
        <div class="transform translate-y-2/4 bg-white rounded-full border-2 border-[#E0E3EE] mx-auto inline-flex items-center gap-1 justify-center py-1 px-1.5">
            <img
                class="w-[30px] h-[30px] rounded-full mx-auto"
                src="https://placehold.co/30/purple/yellow"
                alt="img"
            />
            <img
                class="w-[30px] h-[30px] rounded-full mx-auto grayscale"
                src="https://placehold.co/30/purple/yellow"
                alt="img"
            />
            <img
                class="w-[30px] h-[30px] rounded-full mx-auto grayscale"
                src="https://placehold.co/30/purple/yellow"
                alt="img"
            />
            <img
                class="w-[30px] h-[30px] rounded-full mx-auto grayscale"
                src="https://placehold.co/30/purple/yellow"
                alt="img"
            /><img
                class="w-[30px] h-[30px] rounded-full mx-auto grayscale"
                src="https://placehold.co/30/purple/yellow"
                alt="img"
            />
        </div>
    </div>
    <div class="mt-5 w-full text-center">
        <h3 class="text-[20px] md:text-[22px] font-bold leading-tight md:leading-tight">
            Quizzes
        </h3>
        <p class="text-[16px] md:text-[18px] leading-normal md:leading-normal">
            Some message to prompt them to start filling out the quizzes.
        </p>
        <div class="mt-4 text-right">
            <p class="text-[14px] leading-tight">
                1/8 quizzes completed
            </p>
            <div class="mt-3 relative w-full h-2 rounded-full bg-[#EFF0F7]">
                <div style="width:25%;" class="absolute top-0 left-0 bottom-0 bg-[#22A573] rounded-full"></div>
            </div>
        </div>
    </div>
    <div class="w-full mt-4 grid grid-cols-2 gap-4 text-center">
        <a href="" class="relative p-4 rounded-md bg-[#EFF0F7] border-2 border-[#22A573] cursor-pointer hover:opacity-80 duration-300">
            <span class="absolute top-2 right-2 inline-block rounded-full bg-[#22A573] text-white p-1">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="size-3">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                </svg>
            </span>

            <img
                class="w-[60px] h-[60px] rounded-full mx-auto mb-2"
                src="https://placehold.co/60/purple/yellow"
                alt="img"
            />
            <h3 class="fonmt-semibold text-[16px] leading-tight">
                Care Explorer {{ item }}
            </h3>
            <p class="text-[14px] leading-normal">
                {{ item }} min quiz
            </p>
        </a>

        {% for item in '123456' %}
        <a href="" class="block relative p-4 rounded-md bg-[#EFF0F7] border-2 border-[#EFF0F7] cursor-pointer hover:opacity-80 duration-300">
            <img
                class="w-[60px] h-[60px] rounded-full mx-auto mb-2"
                src="https://placehold.co/60/purple/yellow"
                alt="img"
            />
            <h3 class="fonmt-semibold text-[16px] leading-tight">
                Care Explorer {{ item }}
            </h3>
            <p class="text-[14px] leading-normal">
                {{ item }} min quiz
            </p>
        </a>
        {% endfor %}
    </div>
</section>
<section class="mt-5 mb-20">
    <h2 class="text-center text-[22px] md:text-[24px] leading-tight md:leading-tight mb-5">
        Your Latest Reviews
    </h2>

    {% for item in '1234' %}
    <div class="intro overflow-hidden gap-0 mb-4">
        <div class="w-full flex justify-between items-center gap-4">
            <h3 class="font-bold text-[18px] md:text-[20px] leading-tight md:leading-tight">
                Eddie Jones
            </h3>
            <div class="relative">
                <ul class="flex items-center gap-1">
                    {% for item in '12345' %}
                    <li>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
                          <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd" />
                        </svg>
                    </li>
                    {% endfor %}
                </ul>
                <ul style="width: 70%;" class="absolute top-0 left-0 botom-0 flex items-center gap-1 text-[#F1DF0F] overflow-hidden">
                    {% for item in '12345' %}
                    <li>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
                          <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd" />
                        </svg>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <p class="w-full mt-2 text-[16px] md:text-[17px] leading-normal md:leading-normal">
            “Aaron is amazing, he looked after my father and they built us an amazing relationship!”
        </p>
        <h4 class="w-full text-left mt-1 text-[14px] font-bold text-[#870099]">
            Aaron was my fathers carer
        </h4>
        <a class="ml-auto flex items-center gap-1 text-[16px] text-[#EF4444] cursor-pointer hover:opacity-80 duration-300">
            <span class="block">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
                  <path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
                </svg>
            </span>
            <span class="font-bold">
                Report
            </span>
        </a>
    </div>
    {% endfor %}

    <a href="" class="mt-5 block w-full py-3.5 px-5 rounded-full border-2 border-primary text-primary hover:text-white hover:bg-primary font-bold text-[18px] md:text-[20px] justify-center shadow-md hover:opacity-80 duration-300 cursor-pointer text-center">
        See all Reviews
    </a>

    <a href="" class="mt-5 block w-full py-4 px-5 rounded-full bg-primary text-white font-bold text-[18px] md:text-[20px] flex items-center gap-1 justify-center shadow-md hover:opacity-80 duration-300 cursor-pointer">
        <span class="block">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
            </svg>
        </span>
        <span>
           Copy Reviews link
        </span>
    </a>

</section>
{% endblock %}