{% extends "_frame.html" %}

{% block title -%}
Remote Party Finder
{%- endblock %}

{% block head %}
<link rel="stylesheet" href="/assets/listings.css"/>
{% endblock %}

{% block body %}
{% for container in containers %}
{% let listing = container.listing.borrow() %}
<div class="listing" data-id="{{ listing.id }}" data-updated-minutes="{{ container.since_updated().num_minutes() }}">
    <div class="left">
        {% let duty_class %}
        {% if listing.is_cross_world() %}
            {% let duty_class = " cross" %}
        {% else %}
            {% let duty_class = " local" %}
        {% endif %}
        <div class="duty{{ duty_class }}">{{ listing.duty_name() }}</div>
        <div class="description">
            {%- let desc = listing.description.full_text() %}
            {%- if desc.is_empty() -%}
                <em>None</em>
            {%- else -%}
                {{ desc }}
            {%- endif -%}
        </div>
        <div class="party">
            {% for slot in listing.slots() %}
                {% let filled %}
                {% let title %}
                {% let role_class %}
                {% match slot %}
                    {% when Ok with (slot) %}
                        {% let filled = " filled" %}
                        {% match slot.role() %}
                            {% when Some with (role) %}
                                {% let role_class = " {}"|format(role.as_str().to_lowercase()) %}
                            {% when None %}
                                {% let role_class = "".to_string() %}
                        {% endmatch %}
                        {% let title = slot.code().to_string() %}
                    {% when Err with (tuple) %}
                        {% let filled = "" %}
                        {% let title = tuple.1.clone() %}
                        {% let role_class = " {}"|format(tuple.0) %}
                {% endmatch %}
                <div class="slot{{ filled }}{{ role_class }}" title="{{ title }}">
                    {% if !filled.is_empty() %}
                    <svg viewBox="0 0 32 32">
                        <use href="/assets/icons.svg#{{ title }}"></use>
                    </svg>
                    {% endif %}
                </div>
            {% endfor %}
            <div class="total">{{ listing.slots_filled() }}/{{ listing.slots_available }}</div>
        </div>
    </div>
    <div class="middle">
        <div class="stat">
            <div class="name">Min IL</div>
            <div class="value">{{ listing.min_item_level }}</div>
        </div>
    </div>
    <div class="right meta">
        <div class="item creator">
            <span class="text">{{ listing.name.full_text() }} @ {{ listing.home_world_string() }}</span>
            <span title="Creator">
                <svg class="icon" viewBox="0 0 32 32">
                    <use href="/assets/icons.svg#user"></use>
                </svg>
            </span>
        </div>
        <div class="item world">
            <span class="text">{{ listing.created_world_string() }}</span>
            <span title="Created on">
                <svg class="icon" viewBox="0 0 32 32">
                    <use href="/assets/icons.svg#sphere"></use>
                </svg>
            </span>
        </div>
        <div class="item expires">
            <span class="text">{{ container.human_time_left() }}</span>
            <span title="Expires">
                <svg class="icon" viewBox="0 0 32 32">
                    <use href="/assets/icons.svg#stopwatch"></use>
                </svg>
            </span>
        </div>
        <div class="item updated">
            <span class="text">{{ container.human_since_updated() }}</span>
            <span title="Updated">
                <svg class="icon" viewBox="0 0 32 32">
                    <use href="/assets/icons.svg#clock"></use>
                </svg>
            </span>
        </div>
    </div>
</div>
{% endfor %}
{% endblock %}