{% set locale = 'en' %}
{% extends "base.html" %}
{% block main %}
<div class="max-w-screen-md mx-auto pt-5">

    <span class="flex items-end mb-1">
        <img {% if infos['logo_hash'] %}
             src="https://app.yunohost.org/default/v3/logos/{{ infos['logo_hash'] }}.png"
             {% else %}
             src="{{ url_for('static', filename='app_logo_placeholder.png') }}"
             {% endif %}
             loading="lazy"
             class="h-12 w-12 rounded-lg object-cover shadow-sm mt-1"
        />
        <h2 class="pl-2 pt-3 text-3xl font-bold text-gray-900">{{ infos["manifest"]["name"] }}</h2>
        {% if infos['category'] %}
        <span class="ml-2 mb-1 rounded-full px-2.5 py-0.5 text-[10px]  border text-{{ catalog['categories'][infos['category']]['color'] }}-500 border-{{ catalog['categories'][infos['category']]['color'] }}-400 ">
            {{ catalog['categories'][infos['category']]['title'][locale].lower() }}
        </span>
        {% endif %}
        <div class="grow"></div>

        {% if infos['level'] == 0 %}
        <div class="py-2.5 px-3">
            <i class="text-md fa fa-exclamation-circle text-red-500" aria-hidden="true"></i>
        </div>
        {% elif infos['level']|int <= 4 %}
        <div class="py-2.5 px-3">
            <i class="text-md fa fa-exclamation-triangle text-orange-500" aria-hidden="true"></i>
        </div>
        {% elif infos['level'] == 8 %}
        <div class="py-2.5 px-3">
            <i class="text-md fa fa-diamond text-teal-500" aria-hidden="true"></i>
        </div>
        {% endif %}

        <div class="mt-2">
            <a
              href="#"
              class="mr-3 inline-block group btn border text-violet-600 border-violet-500 hover:bg-violet-500 hover:text-white"
            >
                    123 <i class="fa fa-star-o inline-block group-hover:hidden" aria-hidden="true"></i>
                        <i class="fa fa-star   hidden group-hover:inline-block" aria-hidden="true"></i>
            </a>
            {% if infos["manifest"]["upstream"]["demo"] %}
            <a
              class="btn btn-success inline-block"
              href="{{ infos["manifest"]["upstream"]["demo"] }}"
            >
              <i class="fa fa-external-link fa-fw" aria-hidden="true"></i>
              Try the demo
            </a>
            {% endif %}
        </div>
    </span>

    <p class="text-sm text-slate-500">Current version: {{ infos["manifest"]["version"] }}</p>
    {% if infos["potential_alternative_to"] %}
    <p class="text-sm text-slate-500">Potential alternative to: {{ infos["potential_alternative_to"]|join(', ') }}</p>
    {% endif %}

    <div class="from-markdown">{{ infos["full_description_html"]|safe }}</div>

    {% if infos["screenshot"] %}
    <img src="{{ infos["screenshot"] }}" />
    {% endif %}


    <p>{{ infos["manifest"]["integration"] }}</p>
    <div class="from-markdown">{{ infos["pre_install_html"] | safe }}</div>

    {% if infos["antifeatures"] %}
    <h3 class="inline-block text-xl mb-2 font-semibold">Anti-features</h3> <p class="inline-block text-sm">(This app has features you may not like)</p>
    <div class="mb-3 rounded-md bg-red-200 text-red-800 px-5 py-2">
        <ul>
        {% for antifeature in infos["antifeatures"] %}
            <li class="mb-1"><i class="fa fa-{{ catalog['antifeatures'][antifeature]['icon'] }} fa-fw" aria-hidden="true"></i> {{ catalog['antifeatures'][antifeature]['description'][locale] }}</li>
        {% endfor %}
        </ul>
    </div>
    {% endif %}


    <h3 class="text-xl mb-2 font-semibold">Useful links</h3>
    <div>
        {% set upstream = infos["manifest"]["upstream"] %}
        <a class="block btn btn-link my-1" href="https://spdx.org/licenses/{{upstream.license}}"><i class="fa fa-institution fa-fw" aria-hidden="true"></i> License : {{ upstream.license }}</a>
        {% if upstream.website %}<a class="block btn btn-link my-1" href="{{ upstream.website }}"><i class="fa fa-globe fa-fw" aria-hidden="true"></i> Official website</a>{% endif %}
        {% if upstream.admindoc %}<a class="block btn btn-link my-1" href="{{ upstream.admindoc }}"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Official admin documentation</a>{% endif %}
        {% if upstream.userdoc %}<a class="block btn btn-link my-1" href="{{ upstream.userdoc }}"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Official user documentation</a>{% endif %}
        {% if upstream.code %}<a class="block btn btn-link my-1" href="{{ upstream.code }}"><i class="fa fa-code fa-fw" aria-hidden="true"></i> Official code repository</a>{% endif %}
        <a class="block btn btn-link my-1" href="{{ infos["git"]["url"] }}"><i class="fa fa-code fa-fw" aria-hidden="true"></i> YunoHost package repository</a>
    </div>
</div>
{% endblock %}