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

    <span class="flex flex-row 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="flex-auto basis-1/4 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']|localize|lower }}
        </span>
        {% endif %}
        <div class="grow"></div>


        <div class="h-9.5">

            {% if infos['level'] == 0 %}
            <div class="py-2 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 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 px-3">
                <i class="text-md fa fa-diamond text-teal-500" aria-hidden="true"></i>
            </div>
            {% endif %}

            {% set this_app_stars = stars.get(app_id, {})|length %}
            {% if user %}
                {% set user_starred_this_app = user['id'] in stars.get(app_id, {}) %}
            {% else %}
                {% set user_starred_this_app = False %}
            {% endif %}

           <a
              href="{{ url_for('star_app', app_id=app_id, action="unstar" if user_starred_this_app else "star") }}"
              role="button"
              class="mr-1 inline-block group btn border text-violet-600 border-violet-500 {% if user %}hover:bg-violet-500 hover:text-white{% endif %}"
           >
                {% if not user_starred_this_app %}
                    <span class="inline-block {% if user %}group-hover:hidden{% endif %}">{{ this_app_stars }}</span>
                    <span class="hidden {% if user %}group-hover:inline-block{% endif %}">{{ this_app_stars+1 }}</span>
                    <i class="fa fa-star-o inline-block {% if user %}group-hover:hidden{% endif %}" aria-hidden="true"></i>
                    <i class="fa fa-star   hidden {% if user %}group-hover:inline-block{% endif %}" aria-hidden="true"></i>
                {% else %}
                    <span class="inline-block group-hover:hidden">{{ this_app_stars }}</span>
                    <span class="hidden group-hover:inline-block">{{ this_app_stars-1 }}</span>
                    <i class="fa fa-star   inline-block group-hover:hidden" aria-hidden="true"></i>
                    <i class="fa fa-star-o hidden group-hover:inline-block" aria-hidden="true"></i>
                {% endif %}
            </a>
            {% if infos["manifest"]["upstream"]["demo"] %}
            <a
              class="btn btn-success inline-block mr-1"
              href="{{ infos["manifest"]["upstream"]["demo"] }}"
            >
              <i class="fa fa-external-link fa-fw" aria-hidden="true"></i>
              {{ _("Try the demo") }} 
            </a>
            {% endif %}
        </div>

        <a class="h-9.5 inline-block rounded-md border p-0 bg-gray-900 text-white " href="https://install-app.yunohost.org/?app={{ app_id }}">
            <span class="inline-block text-[11px] leading-3 text-center py-1.5 pl-2">Install<br/>with</span>
            <span class="inline-block pr-2 pt-1"><img src="{{ url_for('static', filename='horizontal-yunohost.svg') }}" /></span>
        </a>

    </span>

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

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

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

    {% if infos["manifest"]["integration"]["architectures"] != "all" %}
     <div class="my-3 rounded-md bg-orange-200 text-orange-800 px-5 py-2">
         <i class="fa fa-exclamation-triangle fa-fw"></i> {{ _("This app is only compatible with these specific architectures: %(archs)s", archs=infos["manifest"]["integration"]["architectures"]|join(', ')) }}
    </div>
    {% endif %}

    {% if infos["manifest"]["integration"]["ram"]["build_binary"] >= 500 * 1024 * 1024 %}
     <div class="my-3 rounded-md bg-orange-200 text-orange-800 px-5 py-2">
         <i class="fa fa-exclamation-triangle fa-fw"></i> {{ _("This app requires an unusual amount of RAM to install: %(ram)s", ram=infos["manifest"]["integration"]["ram"]["build"]) }}
    </div>
    {% endif %}

    {% if infos["pre_install_html"] %}
    <div class="my-3 rounded-md bg-blue-200 text-blue-800 px-5 py-2">
        <h3 class="inline-block text-xl mb-2 font-semibold">{{ _("Important infos before installing") }}</h3>
        <div class="from-markdown">{{ infos["pre_install_html"] | safe }}</div>
    </div>
    {% endif %}

    {% 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="my-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']|localize }}</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: %(license)s", 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 %}