{% import "icons.html" as icons %}
<dialog
data-onload-showmodal
class="backdrop:bg-background/50 bg-background max-w-prose w-full rounded-lg text-foreground border-4 p-6 shadow-lg"
style="border-color: {{ category.color }}"
>
<div class="mb-2 flex justify-between">
<div class="font-bold">
<span style="color: {{ category.color }}">{{ category.name }} / </span>
<span>{{ challenge.name }}</span>
</div>
<div class="flex items-center gap-4">
<rhombus-tooltip class="cursor-pointer">
<div slot="content">
<table>
{%- for division_points in challenge.division_points -%}
<tr>
<td class="pr-2 text-right">
{{ divisions[division_points.division_id].name }}
</td>
<td class="pr-2">
{{ t("solves", solves=division_points.solves) }}
</td>
<td>{{ t("points", points=division_points.points) }}</td>
</tr>
{%- endfor -%}
</table>
</div>
<span
>{{ t("solves-points", solves=challenge.division_points[0].solves, points=challenge.division_points[0].points) }}</span
>
</rhombus-tooltip>
</div>
</div>
<div class="mb-4 prose dark:prose-invert">
{{ challenge.description | safe }}
</div>
{% with solve=team.solves[challenge.id] %}
{% if not solve %}
<form
class="flex gap-2"
hx-post="/challenges/{{ challenge.id }}"
hx-target="next"
>
<input
type="text"
name="flag"
placeholder="Enter flag..."
autocomplete="off"
class="bg-background border p-2 rounded-lg grow focus-visible:outline-none"
/>
<button class="border rounded-lg p-2" type="submit">Submit Flag</button>
</form>
<div></div>
{% else %}
{% if not user_writeups[challenge.id] %}
<form
class="flex gap-2"
hx-post="/challenges/{{ challenge.id }}/writeup"
hx-target="next"
hx-indicator="#loader"
>
<div class="grow flex justify-end items-center relative">
<input
type="url"
name="url"
placeholder="Enter writeup link..."
autocomplete="off"
class="bg-background border p-2 rounded-lg w-full focus-visible:outline-none"
/>
<div id="loader" class="absolute mr-2 pointer-events-none">
{{ icons.spinner(attrs='class="animate-spin"') }}
</div>
</div>
<button class="border rounded-lg p-2" type="submit">
Submit Writeup
</button>
</form>
<div></div>
<div class="mb-2"></div>
{% else %}
<button
class="bg-destructive p-2 mb-2 rounded-lg"
hx-delete="/challenges/{{ challenge.id }}/writeup"
>
Rescind writeup
</button>
{% endif %}
{% if team.writeups[challenge.id] %}
<div class="mb-2">
<div>Team's writeups:</div>
<ul>
{% for writeup in team.writeups[challenge.id] %}
<li class="flex justify-between">
<a
class="underline text-blue-300"
target="_blank"
href="{{ writeup.url }}"
>{{ writeup.url }}</a
>
<span>by {{ team.users[writeup.user_id].name }}</span>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endif %}
{% endwith %}
{% if challenge.attachments | length > 0 %}
<div class="flex gap-2 mt-4">
{% for attachment in challenge.attachments %}
<a
class="pr-2 py-1 pl-1 max-w-fit rounded-lg flex"
style="background-color: {{ category.color }}77"
href="{{ attachment.url }}"
>
<div class="scale-75">{{ icons.attachment() }}</div>
{{ attachment.name }}</a
>
{% endfor %}
</div>
{% endif %}
</dialog>