{% extends "base.html" %}
{% block title %}签到{% endblock %}

{% block content %}
<div class="p-4 space-y-4">

    <!-- 标题 -->
    <div class="flex justify-between items-center">
        <h1 class="text-xl font-bold">签到任务</h1>
        <span class="text-sm text-zinc-500">
            共 {{ total }} 条
        </span>
    </div>

    {% if total == 0 %}
    <div class="text-center text-zinc-400 py-10">
        暂无签到任务
    </div>
    {% endif %}

    <!-- 列表 -->
    <div class="space-y-3">

        {% for item in list %}
        <a href="/sign/{{ item.id }}" class="block bg-white rounded-2xl p-4 shadow
                  active:scale-95 transition">

            <!-- 第一行 -->
            <div class="flex justify-between items-center">
                <div class="font-semibold text-base">
                    {{ item.knowingName }}
                </div>

                {% if item.isFinishKnowing == 1 %}
                <span class="text-xs bg-green-100 text-green-600 px-2 py-0.5 rounded-full">
                    已签到
                </span>
                {% elif item.isEnded %}
                <span class="text-xs bg-zinc-100 text-zinc-400 px-2 py-0.5 rounded-full">
                    已结束
                </span>
                {% else %}
                <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full">
                    进行中
                </span>
                {% endif %}
            </div>

            <!-- 时间 -->
            <div class="text-sm text-zinc-500 mt-1">
                {{ item.startDate }} {{ item.startTime }} - {{ item.endTime }}
            </div>

            <!-- 发起人 -->
            <div class="flex justify-between items-center mt-2 text-sm">

                <div class="text-zinc-600">
                    {{ item.sendRole }} · {{ item.sendName }}
                </div>

                {% if item.isPicture == 0 %}
                <span class="text-xs bg-orange-100 text-orange-600 px-2 py-0.5 rounded">
                    需拍照
                </span>
                {% endif %}
            </div>

        </a>
        {% endfor %}

    </div>

</div>
{% endblock %}