{% set title = image.title or image.uuid %}
{% extends "page.html" %}
{% block title %}{{ image.title or image.uuid }}{% endblock %}
{% block subtitle %}{{ image.date }}{% endblock %}

{% block buttons %}
    <form action="/photo/{{ image.uuid }}/op" method="post">
        {% if image.status == PhotoStatus.private %}
            <input type="submit" class="secondary-button pure-button" name="op" value="Make public" />
        {% else %}
            <input type="submit" class="secondary-button pure-button" name="op" value="Make private" />
        {% endif %}
    </form>
    <a href="/photo/{{ image.uuid }}/edit"><button class="secondary-button pure-button">Edit</button></a>
{% endblock %}

{% block head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
{% endblock %}

{% block body %}
<div class="photo-view pure-g">
    <div class="photo-preview pure-u-2-3">
        <a href="/thumb/set/big/{{ image.uuid }}.jpg">
            <img src="/thumb/set/preview/{{ image.uuid }}.jpg" />
        </a>
    </div>
    <div class="photo-info pure-u-1-3">
        {% if image.lat and image.lon %}
        <div class="single-photo-map">
            <div id="map" style="height: 200px"></div>
            <script type="text/javascript">
                var position = [{{ image.lat }}, {{ image.lon }}];

                var map = L.map('map', {
                    crs: L.CRS.EPSG3857, // default
                    attributionControl: false
                }).setView(position, 13);
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

                }).addTo(map);

                L.marker(position).addTo(map);

                var refreshResults = function() {
                    var southWest = map.getBounds().getSouthWest();
                    var northEast = map.getBounds().getNorthEast();
                    var northWest = map.getBounds().getNorthWest();
                    var southEast = map.getBounds().getSouthEast();
                    console.log(southWest, northEast, northWest, southEast)
                }

                map.on('moveend', refreshResults);

                refreshResults();

            </script>
            <div>
                <span class="coords">{{ image.lat }}, {{ image.lon }}</span>
            </div>
        </div>
        {% endif %}
        <div class="photo-metadata">
            <h2>Information</h2>
            <ul>
                <li>
                    <strong>Date:</strong> {{ image.date }}
                </li>
                {% if image.date_offset %}
                <li>
                    <strong>Time offset: </strong> {{ image.date_offset }}m
                </li>
                <li>
                    <strong>Embedded date: </strong>{{ image.date_real }}
                </li>
                {% endif %}
                <li>
                    <strong>Status: </strong>{{ image.status | statusstr }}
                </li>
                <li>
                    <strong>Versions:</strong> {{ image.files|length }}
                </li>
            </ul>
        </div>
        {% if image.description %}
        <div class="photo-description">
            <h2>Description</h2>
            <p>{{ image.description }}</p>
        </div>
        {% endif %}
        <div class="photo-formats">
            <h2>Versions</h2>
            <ul class="pure-g">
            {% for img in image.files %}
                <li class="pure-u-1 pure-g">
                    <a href="/thumb/one/big/{{ img.uuid }}.jpg" class="pure-g-1-4">
                        <img src="/thumb/one/small/{{ img.uuid }}.jpg" />
                    </a>
                    <div class="pure-u-3-4">
                        <div>
                            <span class="uuid">{{ img.uuid }}</span>
                        </div>
                        <div>
                            {{ img.fname }}
                        </div>
                        <div>
                            {{ img.path | basename }}
                        </div>
                        <div>
                            {{ img.size | filesizeformat }}{% if img.width %} - {{ img.width }} x {{ img.height }}{% endif %}
                        </div>
                        {% if img.orientation > 0 %}
                        <div>
                            Rotation: {{ img.orientation * 90 }}&deg;
                        </div>
                        {% endif %}
                        <div>
                            {{ img.format }}
                        </div>
                        <div>
                            <a href="/download/one/{{ img.uuid }}">download</a>
                            <a href="/download/one/{{ img.uuid }}.{{ img.format | mime2ext }}?preview=true">preview</a>
                        </div>
                    </div>
                </li>
            {% endfor %}
            </ul>
        </div>
        <div class="photo-tags">
            <h2>Tags{% if auth %} <a href="/create_tags?uuid={{ image.uuid }}">edit</a>{% endif %}</h2>
            <ul class="tags-picker spaced">
            {% for tagi in image.tags %}
                <li>
                    <a href="/tag/{{ tagi.tag.slug }}">{{ tagi.tag.name }}</a>
                </li>
            {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% if nearby %}
<hr/>
<div>
    <h2>Nearby</h2>
    <div class="photo-feed">
        {% for i in nearby %}
        <div class="photo">
            <a href="/photo/{{ i.uuid }}">
                <img src="/thumb/set/feed/{{ i.uuid }}.jpg" style="max-width: 250px"/>
            </a>
        </div>
        {% endfor %}
        <br clear="all" />
    </div>
</div>
{% endif %}
{% if recent %}
<hr/>
<div>
    <h2>Recent</h2>
    <div class="photo-feed">
        {% for i in recent %}
        <div class="photo{% if image.id == i.id %} current-photo{% endif %}">
            <a href="/photo/{{ i.uuid }}">
                <img src="/thumb/set/feed/{{ i.uuid }}.jpg" style="max-width: 250px"/>
            </a>
        </div>
        {% endfor %}
        <br clear="all" />
    </div>
</div>
{% endif %}
{% endblock %}