{% extends 'layouts/base.html' %}

{% set page_title = sw.name %}

{% block body_header %}
{% endblock %}

{% block body %}

<div class="container">
    <div class="columns is-desktop store-header">

        <div class="column is-three-quarters">
            <div class="columns is-mobile">
                <div class="column is-narrow">

                    {% if sw.icon_name %}
                    <img class="" src="{{ config.APPSTREAM_MEDIA_URL + '/' + sw.gcid + '/icons/64x64/' + sw.icon_name }}" alt="Icon">
                    {% else %}
                    <img class="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGRlZnMvPjxyZWN0IHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjEzLjQ2MDkzNzUiIHk9IjMyIiBzdHlsZT0iZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQ7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9nPjwvc3ZnPg==" alt="Icon">
                    {% endif %}
                </div>
                <div class="column-header column is-three-quarters is-three-quarters-mobile">
                    <h1>{{sw.name}}</h1>
                    <h2>{{sw.summary}}</h2>
                    {% if cpt.url_for(AppStream.UrlKind.HOMEPAGE) %}
	                <a class="" href="{{cpt.url_for(AppStream.UrlKind.HOMEPAGE)}}">{{ sw.developer_name if sw.developer_name else 'Project Homepage' }}</a>
                    {% elif sw.developer_name %}
                        {{sw.developer_name}}
                    {% endif %}

                </div>
            </div>

        </div>
        <div class="column is-center-mobile">
            <div class="details is-size-7">
                <h3>Badges</h3>
                {% if sw.is_free %}
                    <div class="badge-icon"><i class="fas fa-heart badge" aria-hidden="true"></i></div> <span>Respects Freedom</span><br/>
                {% endif %}
                <!--<div class="badge-icon"><i class="fas fa-shield-alt badge" aria-hidden="true"></i></div> <span>Verifiable</span><br/>
                <div class="badge-icon"><i class="fas fa-mobile badge" aria-hidden="true"></i></div> <span>Mobile friendly</span>-->
                <br><br>
                <a href="appstream:{{component_id}}" class="store-button-install button is-primary"><span>Install Now</span> <i class="fas fa-check"></i></a>
            </div>
        </div>
    </div>


    <div class="columns is-desktop">
        <div class="column is-three-quarters">
            <div class="screenshots">
            {% if cpt.screenshots %}
                {% set nb_visible_screens = 1 %}
                {% if cpt.screenshots|length > 1 %}
                    {% set nb_visible_screens = 2 %}
                {% endif %}

                {% for scr in cpt.screenshots %}
                <img class="size-{{nb_visible_screens}}" src="{{ screenshot_get_orig_image_url(scr) }}" alt="...">
                {% endfor %}
            {% endif %}
            </div>
            <div class="description">
                {{sw.description|safe}}
            </div>
        </div>
        <div class="column">
            <div class="details is-size-7">

                <h3>Information</h3>

                <strong>License</strong>
                <p>{{sw.project_license if sw.project_license else 'Unknown'}}</p>
                <strong>Versions</strong>
                {% for suite_name, pkgs in packages_map.items() %}
                <p><a href="{{ url_for('packages.bin_package_details', repo_name=pkgs[0].repo.name, suite_name=suite_name, name=pkgs[0].name) }}">{{pkgs[0].version}}</a> ({{suite_name}})</p>
                {% endfor %}
                {% if sw.categories %}
                <strong>Category</strong>
                <p>{{sw.categories[0]}}</p>
                {% endif %}
                &nbsp;<br/>
            </div>
        </div>
    </div>
</div>

{% endblock %}