{% extends 'base.html' %}
{% block head %}
{{ super() }}
<meta name="referrer" content="no-referrer" />
<style type="text/css">
    .resize-font {
        font-size: 0.95rem;
    }

    .sup {
        font-size: 60%;
    }

    .pad-tag {
        margin: 0.10rem;
    }
</style>
{% endblock head %}
{% block body %}

<section class="section section-padding">
    <div class="container">
        <div class="columns is-mobile is-multiline is-centered">
            <!-- Options Card -->
            <div class="column is-4">
                <div class="card">
                    <div class="card-header">
                        <div class="card-header-title">
                            Options
                        </div>
                    </div>
                    <div class="card-content">
                        <div class="content word-break resize-font">
                            <form method="GET" action="{{ request.path }}">
                                <div class="field">
                                    <label for="tags">Tags</label>
                                    <p class="control has-icons-left">
                                        <input class="input" type="search" name="tags" value="{{ tags }}""/>
                                        <span class=" icon is-small is-left">
                                        <i class="fas fa-search"></i>
                                        </span>
                                    </p>
                                </div>

                                <div class="field">
                                    <label for="count">Count</label>
                                    <p class="control has-icons-left">
                                        <input class="input" type="number" min="0" max="1000" name="count"
                                            value="{{ count or 50}}" />
                                        <span class="icon is-small is-left">
                                            <i class="fas fa-equals"></i>
                                        </span>
                                    </p>
                                </div>
                                <div class="field">
                                    <label for="page">Page</label>
                                    <p class="control has-icons-left">
                                        <input class="input" type="number" min="0" max="1000" name="page"
                                            value="{{ page or 0 }}" />
                                        <span class="icon is-small is-left">
                                            <i class="fas fa-flask"></i>
                                        </span>
                                    </p>
                                </div>
                                <div class="field">
                                    <label for="base64">Use base64 proxying?</label>
                                    <input type="checkbox" name="base64" value="true"
                                        {% if base64 %}checked{% endif %} />
                                </div>
                                <div class="field">
                                    <label for="showsample">Show fullsize (instead of thumbnail image)?</label>
                                    <input type="checkbox" name="showfull" value="true"
                                        {% if showfull %}checked{% endif %} />
                                </div>
                                <div class="field">
                                    <label for="showtags">Show tags of image?</label>
                                    <input type="checkbox" name="showtags" value="true"
                                        {% if showtags %}checked{% endif %} />
                                </div>
                                <div class="columns is-centered {% if current_user.has_roles(['Admin']) %}is-4{% endif %}">
                                    <div class="column">
                                        <input class="button is-success is-outlined" type="submit" />
                                    </div>
                                    {% if current_user.has_roles(['Admin']) %}
                                    <div class="column">
                                            <a class="button is-link is-outlined"
                                                href="{{ request.path + 'history' }}">History</a>
                                        </div>    
                                    {% else %}
                                    <div class="column is-5"></div>
                                    {% endif %}
                                    <div class="column">
                                        <a class="button is-info is-outlined"
                                            href="{{ request.path + 'help' }}">Help</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Options Card -->
            {% for image in data %}
            <!-- Card Content -->
            <div class="column is-4">
                <div class="card">
                    <div class="card-header">
                        <div class="card-header-title">
                            Image #{{ image.index }}<a href="{{ image.view }}"><sup class="sup">(source)</sup></a>
                        </div>
                    </div>
                    <div class="card-image">
                        <a href="{{ image.real_url }}">
                            <figure class="image">
                                {% if base64 %}
                                <img src="data:image/png;base64,{{ image.base64 }}">
                                {% else %}
                                {% if showfull %}
                                <img src="{{ image.real_url }}" alt="{{ image.sample_url }}">
                                {% else %}
                                <img src="{{ image.sample_url }}">
                                {% endif %}
                                {% endif %}
                            </figure>
                        </a>
                    </div>
                    {% if showtags %}
                    <div class="card-content">
                        <div class="content word-break resize-font">
                            <details>
                                <summary>Show Tags</summary>
                                <div class="is-divider" data-content="Tags ({{ image.tags|length }})"></div>
                                {% for tag in image.tags %}
                                <span class="pad-tag tag">
                                    {{ tag }}
                                </span>
                                {% endfor %}
                            </details>
                        </div>
                    </div>
                    {% endif %}
                </div>
                <!-- Card End -->
            </div>
            {% endfor %}
        </div>
        <!-- Card Column Content -->
    </div>
</section>
{% endblock body %}