{% extends 'base.html' %}
{% from 'bootstrap/pagination.html' import render_pagination %}
{% from 'bootstrap/form.html' import render_form, render_field %}

{% block title %}{{ photo.author.name }}的照片{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-8">
            <div class="photo">
                <a href="{{ url_for('.get_image', filename=photo.filename) }}" target="_blank">
                    <img class="img-fluid" src="{{ url_for('.get_image', filename=photo.filename_m) }}">
                </a>
            </div>
            <a class="btn btn-primary btn-sm text-white" data-toggle="modal" data-target="#share-modal">分享</a>
            {% if current_user == photo.author or current_user.can('MODERATE') %}
                <a class="btn btn-danger btn-sm text-white" data-toggle="modal" data-target="#confirm-delete"
                   data-href="{{ url_for('.delete_photo', photo_id=photo.id) }}">删除</a>
            {% endif %}
            {% if current_user.is_authenticated and current_user != photo.author %}
                <form class="inline" method="post" action="{{ url_for('.report_photo', photo_id=photo.id) }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="btn btn-link btn-sm">汇报</button>
                </form>
            {% endif %}
            <p class="text-muted float-right small">
                <span class="oi oi-clock"></span> 上传  {{ moment(photo.timestamp).format('LL') }}
            </p>
            {% include 'main/_comment.html' %}
        </div>
        <div class="col-md-4">
            {% include 'main/_photo_sidebar.html' %}
        </div>
    </div>
    <!-- share modal -->
    <div class="modal fade" id="share-modal" tabindex="-1" role="dialog" aria-labelledby="shareModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="shareModalLabel">链接</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body w-100">
                    <input class="form-control" value="{{ url_for('.show_photo', photo_id=photo.id, _external=True) }}"
                           readonly>
                </div>
            </div>
        </div>
    </div>
    <!-- delete confirm modal -->
    {% if current_user.is_authenticated %}
        <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="confirmModalLabel">删除确认</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <p>确定要删除该项目吗？</p>
                    </div>
                    <div class="modal-footer">
                        <form class="delete-form" action="" method="post">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button class="btn btn-danger btn-confirm" type="submit">删除</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}