htmx-adventure-card.html

<div class="adventure grid grid-rows-[3rem_1fr_100px] bg-white shadow-md rounded-lg
    transition-shadow hover:shadow-xl hover:outline hover:outline-2 {% if is_program %}grid-cols-[350px]{%endif%}
    {% if is_favorite %} outline-yellow-500
    {% elif adventure.error %} outline-red-500
    {% else %} outline-blue-600
    {% endif %}
    "
    id="adventure_{{adventure.id}}"
    data-cy="{{ adventure.id }}"
    data-lang="{{adventure.language or current_language().lang}}"
    _="on removeMe remove me">

    {% set ownAdventure = True if adventure["creator"] == user["username"] else False %}
    <h2 class="name text-white rounded-t-lg px-6 flex items-center m-0
        {% if is_favorite %} bg-yellow-500
        {% elif adventure.error %} bg-red-500
        {% else %} bg-blue-600
        {% endif %}"
        >
        {{ adventure.name|e }}
    </h2>

    <div class="py-2 px-6">

        {% set creator = _('owner') if adventure["author"] != adventure["creator"] else _('creator') %}
        {% if adventure["creator_public_profile"] or adventure["public_user"] %}
            <p class="text-gray-600 mt-1"><strong>{{ creator }}:</strong> <a href="/user/{{adventure.creator or adventure.username}}">{{ adventure.creator or adventure.username }}</a></p>
        {% else %}
            <p class="text-gray-600 mt-1"><strong>{{ creator }}:</strong> {{ adventure.creator or adventure.username }}</p>
        {% endif %}
        {% if adventure["author"] != adventure["creator"] %}
            <p class="text-gray-600 mt-1"><strong>{{_('creator')}}:</strong> {{ adventure.author or adventure.username }}</p>
        {% endif %}
        <p class="text-gray-600 mt-1">
            <!-- adventure.level will gradually be removed until we have all adventures using only levels. -->
            {% if adventure.levels and adventure.levels|length > 1 %}
                <strong>{{_('levels')}}:</strong> {% for level in adventure.levels %}
                    {{level}}{% if loop.index != adventure.levels|length %}, {% endif %}
                {% endfor %}
            {% else %}
                <strong>{{_('level')}}:</strong> {{ adventure.level }}
            {% endif %}
        </p>
        {% if adventure.get("language") %}
            <p class="text-gray-600 mt-1"><strong>{{_('language')}}:</strong> {{ lang_to_sym(adventure.language) }}</p>
        {% endif %}
        {% if adventure["cloned_times"] %}
            <p class="text-gray-600 mt-1">
                <strong>{{_('cloned_times')}}:</strong> {{adventure["cloned_times"]}}
            </p>
        {%endif%}
        <p class="text-gray-600 mt-1"><strong>{{_('last_update')}}:</strong> {{ adventure.date|format_date }}</p>

        {% if adventure["tags"]|length > 0 %}
            {{ render_partial('htmx-tags-list.html', tags=adventure["tags"], adventure_id=adventure.id) }}
        {%endif%}

        {% if adventure["code"] %}
            <p class="text-gray-600 mt-1"><strong>{{_('number_lines')}}:</strong> {{ adventure.number_lines }}</p>
            <pre level="{{ adventure.level }}" class="text-sm">{{ adventure.code }}</pre>
        {%endif%}
    </div>
    <div id="actions"
        class="flex items-center px-6 py-4 bg-gray-200 shadow-lg">
        {% if is_program %}
            <button class="green-btn" onclick="window.open (hedyApp.viewProgramLink('{{adventure.id}}'))">{{_('view_program')}}</button>
            <span class="fa fa-flag bg-blue-300 hover:bg-blue-600 p-2 mx-4 rounded-full text-white cursor-pointer" onclick="hedyApp.report_program('{{_('report_program')}}','{{ adventure.id }}')"></span>
            {% if is_admin %}
                <i class="fa fa-star p-2 bg-blue-300 {% if adventure.hedy_choice %}text-yellow-500{% else %}text-white{% endif %} rounded-full cursor-pointer hover:bg-blue-600" id="{{adventure.id}}" onclick="hedyApp.set_explore_favourite('{{ adventure.id }}', {% if adventure.hedy_choice %}0{% else %}1{% endif %});" aria-hidden="true"></i>
            {% endif %}
        {% else %}
            {% if user["username"] != adventure["creator"] %}
                <button class="green-btn"
                    hx-post="/public-adventures/clone/{{adventure.id}}"
                    hx-target="#adventure_{{adventure.id}}"
                    hx-swap="outerHTML"
                    _="on htmx:afterRequest
                            if detail.xhr.status == 200 then
                                hedyApp.modal.notifySuccess('{{_('adventure_cloned')}}')
                            end"
                    data-cy="clone_{{adventure.name}}"
                    data-id="{{adventure.id}}">{{_('clone')}}</button>
            {% else %}
                <a href="/for-teachers/customize-adventure/{{adventure.id}}"
                    data-cy="edit_{{adventure.name}}"
                    class="green-btn" id="edit_adventure_button">
                    {{_('edit_adventure')}}</a>
            {% endif %}
        {% endif %}
    </div>
</div>