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

<section class="section section-padding">
    <div class="container">
        <div class="columns is-mobile is-multiline is-centered">
            <!-- Optiosn Card -->
            <div class="column is-3">
                <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" />
                                        <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="50" />
                                        <span class="icon is-small is-left">
                                            <i class="fas fa-equals"></i>
                                        </span>
                                    </p>
                                </div>
                                <div class="field">
                                    <label for="base64">Use base64 encoding?</label>
                                    <input type="checkbox" name="base64" value="true" />
                                </div>
                                <div class="field">
                                    <label for="showsample">Show fullsize (instead of thumbnail image)?</label>
                                    <input type="checkbox" name="showfull" value="true"/>
                                </div>
                                <div class="field">
                                    <label for="showtags">Show tags of image?</label>
                                    <input type="checkbox" name="showtags" value="true" />
                                </div>
                                <div class="columns is-centered">
                                    <div class="column is-4">
                                        <input class="button" type="submit" />
                                    </div>
                                    <div class="column is-5"></div>
                                    <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-3">
                <div class="card">
                    <div class="card-header">
                        <div class="card-header-title">
                            Image #{{ image.index }}
                        </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">
                            {{ image.tags }}
                        </div>
                    </div>
                    {% endif %}
                </div>
                <!-- Card End -->
            </div>
            {% endfor %}
        </div>
        <!-- Card Column Content -->
    </div>
</section>
{% endblock body %}