{% extends "layout.html" %}

{% block csp %}
<meta http-equiv="Content-Security-Policy" content="default-src 'self';
  img-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; object-src 'none';
  font-src 'none'; form-action 'self'; frame-src 'none'; media-src 'none'; manifest-src 'none'; worker-src 'none';">
{% endblock %}

{% block tabs %}
    <li><a href="/inn/0">{{ "inn"|l10n(page_data.lang) }}</a></li>
    <li class="is-active"><a href="/solo/user/0">{{ "solo"|l10n(page_data.lang) }}</a></li>
{% endblock %}

{% block content %}
    <div class="level is-mobile px-3">
        <div class="level-left">
            <div class="tabs is-small is-toggle is-toggle-rounded">
                <ul>
                {% match hashtag %} {% when Some with (val) %}
                    <li><a href="/solo/user/0">{{ "all"|l10n(page_data.lang) }}</a></li>
                    {% if page_data.claim.is_some() %}
                    <li><a href="/solo/user/0?filter=Following">{{ "following"|l10n(page_data.lang) }}</a></li>
                    <li><a href="/solo/user/0?filter=Like">{{ "like"|l10n(page_data.lang) }}</a></li>
                    {% endif %}
                    <li class="is-active"><a href="/solo/user/0?hashtag={{val}}">🏷️ {{val}}</a></li>
                {% else %}
                    {% if page_data.claim.is_some() %}
                        {% match filter.as_deref() %} {% when Some with ("Following") %}
                            <li><a href="/solo/user/0">{{ "all"|l10n(page_data.lang) }}</a></li>
                            <li class="is-active"><a href="/solo/user/{{uid}}?filter=Following">{{ "following"|l10n(page_data.lang) }}</a></li>
                            <li><a href="/solo/user/{{uid}}?filter=Like">{{ "like"|l10n(page_data.lang) }}</a></li>
                        {% when Some with ("Like") %}
                            <li><a href="/solo/user/0">{{ "all"|l10n(page_data.lang) }}</a></li>
                            <li><a href="/solo/user/{{uid}}?filter=Following">{{ "following"|l10n(page_data.lang) }}</a></li>
                            <li class="is-active"><a href="/solo/user/{{uid}}?filter=Like">{{ "like"|l10n(page_data.lang) }}</a></li>
                        {% else %}
                            {% if uid > 0 %}
                                <li><a href="/solo/user/0">{{ "all"|l10n(page_data.lang) }}</a></li>
                                <li><a href="/solo/user/0?filter=Following">{{ "following"|l10n(page_data.lang) }}</a></li>
                                <li><a href="/solo/user/{{uid}}?filter=Like">{{ "like"|l10n(page_data.lang) }}</a></li>
                                <li class="is-active"><a href="/solo/user/{{uid}}">👤 {{username}}</a></li>
                            {% else %}
                                <li class="is-active"><a href="/solo/user/0">{{ "all"|l10n(page_data.lang) }}</a></li>
                                <li><a href="/solo/user/0?filter=Following">{{ "following"|l10n(page_data.lang) }}</a></li>
                                <li><a href="/solo/user/{{uid}}?filter=Like">{{ "like"|l10n(page_data.lang) }}</a></li>
                            {% endif %}
                        {% endmatch %}
                    {% else %}
                        {% if uid > 0 %}
                            <li><a href="/solo/user/0">{{ "all"|l10n(page_data.lang) }}</a></li>
                            <li class="is-active"><a href="/solo/user/{{uid}}">👤 {{username}}</a></li>
                        {% else %}
                            <li class="is-active"><a href="/solo/user/0">{{ "all"|l10n(page_data.lang) }}</a></li>
                        {% endif %}
                    {% endif %}
                {% endmatch %}
                </ul>
            </div>
        </div>
        <div class="level-right">
            <div class="buttons">
                {% if is_following %}
                    <a href="/user/{{uid}}/follow"><button class="button is-danger is-small is-rounded">Unfollow</button></a>
                {% else %}
                    {% match page_data.claim %} {% when Some with (val) %}
                        {% if uid > 0 && uid != val.uid %}
                            <a href="/user/{{uid}}/follow"><button class="button is-success is-small is-rounded">Follow</button></a>
                        {% endif %}
                    {% else %}{% endmatch %}
                {% endif %}
            </div>
        </div>
    </div>

{% match page_data.claim %} {% when Some with (claim) %}
    <article class="media box">
        <figure class="media-left is-hidden-mobile">
            <p class="image is-48x48">
                <img src="/static/avatars/{{claim.uid}}.png">
            </p>
        </figure>
        <div class="media-content">
            <form id="solo" action="/solo/user/0" method="post">
                <fieldset>
                    <div class="field">
                        <p class="control">
                            <div id="editor" class="editor-container textarea" hidden></div>
                            <noscript>
                                <style>
                                    #editor { display: none !important; }
                                </style>
                                <textarea name="content" class="textarea" required minlength="1" maxlength="1000" placeholder="Markdown supported"></textarea>
                                <p class="help">
                                    {{ "javascript_is_required_for_rich_editor"|l10n(page_data.lang) }}
                                </p>
                            </noscript>
                        </p>
                        <div class="select is-small">
                            <select name="solo_type" title="Who can see">
                                <option value="0" selected>{{ "everyone"|l10n(page_data.lang) }}</option>
                                <option value="10">{{ "following"|l10n(page_data.lang) }}</option>
                                <option value="20">{{ "just_me"|l10n(page_data.lang) }}</option>
                            </select>
                        </div>
                    </div>
                    <input type="hidden" name="reply_to" value="0">
                    <nav class="level is-mobile">
                        <div class="level-left">
                            <div class="level-item">
                                <a href="/upload" class="button is-success is-small is-responsive" target="_blank">{{ "upload"|l10n(page_data.lang) }}</a>
                            </div>
                        </div>
                        <div class="level-right">
                            <div class="level-item">
                                <div class="field is-grouped">
                                    <div class="control">
                                        <div class="buttons">
                                            <button type="submit" form="solo" class="button is-info is-small is-responsive">{{ "submit"|l10n(page_data.lang) }}</button>
                                            <button type="submit" class="button is-info is-small is-responsive" formaction="/preview" formtarget="_blank">{{ "preview"|l10n(page_data.lang) }}</button>
                                        </div>
                                     </div>
                                </div>
                            </div>
                        </div>
                    </nav>
                </fieldset>
            </form>
        </div>
    </article>
{% else %} {% endmatch %}

{% for solo in solos %}
<article class="media box">
    <figure class="media-left is-hidden-mobile">
        <p class="image is-48x48">
            <a href="/user/{{solo.uid}}"><img src="/static/avatars/{{solo.uid}}.png"></a>
        </p>
    </figure>
    <div class="media-content">
        <div class="content">
            <p>
                {% match solo.reply_to %}{% when Some with (val) %}
                    <small>{{ "replying_to"|l10n(page_data.lang) }} <a href="/solo/{{val}}">{{val}}</a></small><br>
                {% else %}{% endmatch %}
                <a href="/solo/user/{{solo.uid}}"> <strong>{{solo.username}}</strong> </a>
                <small>{{solo.created_at}}</small>
                <br> {{solo.content}}
            </p>
        </div>
        <nav class="level is-mobile">
            <div class="level-left">
                <a class="level-item" href="/solo/{{solo.sid}}/like">
                    <span class="icon is-small">
                        {% if solo.like %}❤️{% else %}🤍{% endif %}
                    </span>
                    {% if solo.like_count > 0 %}
                    <span>{{solo.like_count}}</span>
                    {% endif %}
                </a>
                {% if solo.can_delete %}
                <a class="level-item" href="#delete_{{solo.sid}}">🗑️</a>
                <div id="delete_{{solo.sid}}" class="overlay">
                    <div class="popup content">
                        <h3>{{ "delete_permanently"|l10n(page_data.lang) }}</h3>
                        <a class="close" href="#">&times;</a>
                        <p>{{ "delete_sure"|l10n(page_data.lang) }}</p>
                        <a href="/solo/{{solo.sid}}/delete" class="button is-danger">{{ "delete"|l10n(page_data.lang) }}</a>
                    </div>
                </div>
                {% endif %}
                <a href="/solo/{{solo.sid}}">💬
                    {% if solo.replies.len() >0 %}
                        {{solo.replies.len()}}
                    {% endif %}
                </a>
            </div>
        </nav>
    </div>
    <div class="media-right">
        {% if solo.solo_type == 20 %}
            <span title="{{ "only_you_can_see"|l10n(page_data.lang) }}">{% include "icons/lock_square.svg" %}</span>
        {% else if solo.solo_type == 10 %}
            <span title="{{ "private"|l10n(page_data.lang) }}">{% include "icons/lock.svg" %}</span>
        {% else %}{% endif %}
    </div>
</article>
{% endfor %}

<nav class="pagination">
    {% if anchor < n %}
        <a class="pagination-previous" disabled>{{ "prev"|l10n(page_data.lang) }}</a>
    {% else %}
        {% match filter.as_deref() %} {% when Some with (val) %}
            <a class="pagination-previous" href="/solo/user/{{uid}}?anchor={{anchor - n}}&is_desc={{is_desc}}&filter={{val}}">{{ "prev"|l10n(page_data.lang) }}</a>
        {% else %}
            {% match hashtag.as_deref() %} {% when Some with (val) %}
            <a class="pagination-previous" href="/solo/user/{{uid}}?anchor={{anchor - n}}&is_desc={{is_desc}}&hashtag={{val}}">{{ "prev"|l10n(page_data.lang) }}</a>
            {% else %}
            <a class="pagination-previous" href="/solo/user/{{uid}}?anchor={{anchor - n}}&is_desc={{is_desc}}">{{ "prev"|l10n(page_data.lang) }}</a>
            {% endmatch %}
        {% endmatch %}
    {% endif %}

    {% if solos.len() < n %}
        <a class="pagination-next" disabled >{{ "next"|l10n(page_data.lang) }}</a>
    {% else %}
        {% match filter.as_deref() %} {% when Some with (val) %}
            <a class="pagination-next" href="/solo/user/{{uid}}?anchor={{anchor + n}}&is_desc={{is_desc}}&filter={{val}}">{{ "next"|l10n(page_data.lang) }}</a>
        {% else %}
            {% match hashtag.as_deref() %} {% when Some with (val) %}
            <a class="pagination-next" href="/solo/user/{{uid}}?anchor={{anchor + n}}&is_desc={{is_desc}}&tag={{val}}">{{ "next"|l10n(page_data.lang) }}</a>
            {% else %}
            <a class="pagination-next" href="/solo/user/{{uid}}?anchor={{anchor + n}}&is_desc={{is_desc}}">{{ "next"|l10n(page_data.lang) }}</a>
            {% endmatch %}
        {% endmatch %}
    {% endif %}
</nav>
{% endblock %}

{% block box %}
{% if !page_data.site_description.is_empty() %}
<div class="box">
    <div class="content">
        {{page_data.site_description}}
    </div>
</div>
{% endif %}
<script src="/static/js/overtype.min.js?v={{ crate::VERSION }}"></script>
{% endblock %}