{% extends "base.html" %}

{% block title %}
{{ title }}
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
var deleteUrl;
var label;

$(document).on('click', '.open-DeleteDialog', function () {
    deleteUrl = $(this).data('id').split('#');
    if (deleteUrl[0] == 'portfolio') {
        label = '<label class="alert-danger">Deleting a portfolio will remove all albums in portfolio<br/>and photos in the album as well. It cannot be undone!!</label>';
    } else if (deleteUrl[0] == 'album') {
        label = '<label class="alert-danger">Deleting an album will remove all photos in the album as well.<br/>It cannot be undone!!</label>';
    } else {
        label = '';
    }
    $('#deleteLabel').html('<span style="font-size:1.5em" class="glyphicon glyphicon-warning-sign"></span>  delete ' + deleteUrl[0])
    $('#delFormLabel').html(label)
    deleteUrl = '/' + deleteUrl.join('/')
});
$(document).on('click', '#submitDelete', function () {
    $.ajax({
        url: deleteUrl,
        data: $('#delForm').serialize(),
        type: 'DELETE',
        success: function(data){
            var response = '<p><label>Response: ' + data + '</label></p><button class="btn btn-primary" id="deleteResponse" type="button">Ok </button>';
            $("#delForm").replaceWith(response)
        },
        error: function(error) {
            console.log(error);
        }
    });
    return false;
});
$(document).on('click', '#deleteResponse', function () {
    $('#deleteDialog').modal('toggle')
    location.reload();
});
</script>
{% endblock %}

{% block content %}
    {% include 'menu.html' %}
    {% include 'flash.html' %}
    <div class="modal fade" id="deleteDialog" tabindex="-1" role="dialog" aria-labelledby="deleteLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="deleteLabel"/>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <form id="delForm" method="DELETE" action="#">
                            {{ deleteform.hidden_tag() }}
                            <span id="delFormLabel"></span><br/>
                            <button class="btn btn-primary" id="submitDelete" type="button">Delete </button>                            
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row well well-sm">
            <h4 class="form-signin-heading center">User Information</h4>
            <div class="col-xs-4 col-sm-6 col-md-6">
                <form class="form-signin" method="POST" action="/user/{{user.username}}">
                    <!--<h3 class="form-signin-heading center">User Information</h3>-->
                    {{ form.hidden_tag() }}
                    {{ wtf.form_field(form.name, value=user.name) }}
                    {{ wtf.form_field(form.email, value=user.email) }}
                    {{ wtf.form_field(form.username, value=user.username) }}
                    {{ wtf.form_field(form.update, class="btn btn-lg btn-primary btn-block") }}
                </form>
            </div>
            <div class="col-xs-4 col-sm-6 col-md-6">
                <form class="form-signin" method="POST" action="/user/{{user.username}}">
                    {{ pwform.hidden_tag() }}
                    {{ wtf.form_field(pwform.passwordcur, placeholder="Current password") }}
                    {{ wtf.form_field(pwform.password, placeholder="New Password") }}
                    {{ wtf.form_field(pwform.passwordchk, placeholder="Password check") }}
                    {{ wtf.form_field(pwform.pwchange, class="btn btn-lg btn-primary btn-block") }}
                </form>
            </div>
        </div>
        <div class="row well well-sm">
            <h4 class="form-signin-heading center">Your Portfolios and Albums</h4>
            <table class="table table-hover table-responsive">
                <thead class="thead-inverse">
                    <tr>
                        <th>Type</th>
                        <th>Name</th>
                        <th>Visible</th>
                        <th>Public</th>
                        <th>User count</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for p in private %}
                    <tr>
                        <td>Portfolio</td>
                        <td>{{p['portfolio']['name']}}</td>
                        <td>{{p['portfolio']['visible']}}</td>
                        <td>{{p['portfolio']['public']}}</td>
                        <td>{{p['portfolio']['usercount']}}</td>
                        <td>
                            <div class="btn-group">
                                <a role="button" class="btn btn-info btn-xs" href="{{ url_for('portfolio', id=p['portfolio']['id']) }}">
                                    Edit <span class="glyphicon glyphicon-edit"></span>
                                </a>
                                <a role="button" data-id="portfolio#{{p['portfolio']['id']}}" class="btn btn-danger btn-xs open-DeleteDialog" data-toggle="modal" data-target="#deleteDialog" href="#">
                                    Delete <span class="glyphicon glyphicon-remove"></span>
                                </a>
                            </div>
                        </td>
                    </tr>
                        {% for a in p['albums'] %}
                        <tr>
                            <td>Album</td>
                            <td>{{p['portfolio']['name']}} <span class="glyphicon glyphicon-arrow-right"></span> {{a.name}}</td>
                            <td>{{a.visible}}</td>
                            <td>{{a.public}}</td>
                            <td>{{a.usercount}}</td>
                            <td>
                                <div class="btn-group">
                                    <a role="button" class="btn btn-info btn-xs" href="{{ url_for('album', id=a.id) }}">
                                        Edit <span class="glyphicon glyphicon-edit"></span>
                                    </a>
                                    <a role="button" data-id="album#{{a.id}}" class="btn btn-danger btn-xs open-DeleteDialog" data-toggle="modal" data-target="#deleteDialog" href="#">
                                        Delete <span class="glyphicon glyphicon-remove"></span>
                                    </a
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="row well well-sm">
            <h4 class="form-signin-heading center">Albums by other users</h4>
            <table class="table table-hover table-responsive">
                <thead class="thead-inverse">
                    <tr>
                        <th>Name</th>
                        <th>Portfolio</th>
                        <th>Owner</th>
                        <th>Permission</th>
                    </tr>
                </thead>
                <tbody>
                    {% for a in albums %}
                    <tr>
                        <td>{{a['album'].name}}</td><td>{{a['album'].portfolio.name}}</td>
                        <td>{{a['album'].portfolio.owner.name}}</td><td>{{a['acl'].name}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div> <!-- /container -->
{% endblock %}