{% extends "base.html" %}

{% block navigation %}
    <ts-sketch-navigation sketch-id="{{ sketch.id }}" active="overview" graphs-enabled="{{ graphs_enabled }}"></ts-sketch-navigation>
{% endblock %}

{% block right_nav %}
    <div class="btn-group">
        {% if sketch.has_permission(current_user, 'write') and sketch.timelines  and upload_enabled %}
            <a href="timelines/" class="btn btn-success"><i class="fa fa-plus"></i>Timeline</a>
        {% endif %}
    </div>

    {% if current_user == sketch.user %}
        <button style="margin-left:10px;" data-toggle="modal" data-target="#share-modal" class="btn btn-primary">
            {% if sketch.is_public %}
                <i class="fa fa-globe"></i> Share</button>
            {% else %}
                <i class="fa fa-lock"></i> Share</button>
            {% endif %}
        </div>
    {% endif %}
{% endblock %}

{% block main %}

    <div class="modal" id="new-sketch-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <span class="modal-title" id="myModalLabel">Choose a name for your new sketch</span>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" action="{{ url_for('sketch_views.overview', sketch_id=sketch.id) }}" method="post">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <input class="form-control search-input" style="background: transparent;padding: 0" id="name" name="name" type="text" placeholder="Untitled sketch" autofocus="true">
                            </div>
                        </div>
                        <br>
                        <input type="submit" class="btn btn-primary" value="Save"/>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        {{ sketch_form.csrf_token }}
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="edit-sketch-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Edit sketch</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" action="{{ url_for('sketch_views.overview', sketch_id=sketch.id) }}" method="post">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <strong>Title</strong>
                                <input class="form-control" id="name" name="name" type="text" value="{{ sketch.name }}" autofocus="true">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <strong>Description</strong>
                                <textarea rows="10" class="form-control" id="description" name="description">{{ sketch.description }}</textarea>
                            </div>
                        </div>
                        <input type="submit" class="btn btn-primary" value="Save"/>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        {{ sketch_form.csrf_token }}
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="share-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Who has access</h4>
                </div>
                <div class="modal-body">
                    {% if sketch.has_permission(user=current_user, permission='write') %}
                        <form action="{{ url_for('sketch_views.overview', sketch_id=sketch.id) }}" method="post">

                            <div class="radio">
                                <label>
                                    <input type="radio" name="permission" value="public" {% if sketch.is_public %}checked="true"{% endif %}>
                                    <i class="fa fa-globe" style="margin-left: 10px;margin-right: 5px;"></i>
                                    Public -  All users of the system can access this sketch
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="permission" value="private" {% if not sketch.is_public %}checked="true"{% endif %}>
                                    <i class="fa fa-lock" style="margin-left: 10px;margin-right: 5px;"></i>
                                    Private - Only you can access this sketch
                                </label>
                            </div>

                            <br>

                            <div class="input">
                                <label>
                                    <i class="fa fa-user" style="margin-right:5px;"></i>
                                    Share with user
                                    <input type="text" name="username">
                                </label>

                                <div class="input">
                                    <label>
                                        <i class="fa fa-users" style="margin-right:5px;"></i>
                                        Share with group
                                        <select id="groups" name="groups">
                                            <option value="" disabled selected>Select group</option>
                                            {% for option in permission_form.groups %}
                                                {{ option }}
                                            {% endfor %}
                                        </select>
                                    </label>
                                </div>

                            </div>

                            {% if sketch.collaborators or sketch.groups %}
                                <br>
                                <table class="table table-hover">
                                    <th>Who has access</th>
                                    <th style="text-align: right; padding-right: 3px;"><i class="fa fa-trash"></i></th>
                                    {% for group in sketch.groups %}
                                        <tr>
                                            <td><i class="fa fa-group"></i>{{ group.name }}</td>
                                            <td align="right"><input name="remove_groups" type="checkbox" value={{ group.id }}></td>
                                        </tr>
                                    {% endfor %}
                                    {% for collaborator in sketch.collaborators %}
                                        <tr>
                                            <td><i class="fa fa-user"></i>{{ collaborator.username }}</td>
                                            <td align="right"><input name="remove_users" type="checkbox" value={{ collaborator.id }}></td>
                                        </tr>
                                    {% endfor %}
                                </table>

                            {% endif %}


                            <br><hr>
                            <button style="margin-right:7px;" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <input type="submit" class="btn btn-success" value="Save changes">
                            {{ permission_form.csrf_token }}
                        </form>
                    {% else %}
                        {% if sketch.is_public %}
                            <i class="fa fa-globe"></i> Public -  All users of the system can access this sketch
                        {% else %}
                            <i class="fa fa-lock"></i> Private - Only you can access this sketch
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="status-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Current status: {{ sketch.get_status.status|title }}</h4>
                </div>
                <div class="modal-body">
                    {% if sketch.has_permission(user=current_user, permission='write') %}
                        <strong>Change status:</strong>
                        <br><br>
                        <form action="{{ url_for('sketch_views.overview', sketch_id=sketch.id) }}" method="post">
                            <select id="status" name="status" class="form-control">
                                <option disabled selected>Set status</option>
                                {% for option in status_form.status %}
                                    {{ option }}
                                {% endfor %}
                            </select>
                            <br><hr>
                            <button style="margin-right:7px;" class="btn btn-default" data-dismiss="modal">Close</button>
                            <input type="submit" class="btn btn-primary" value="Save changes">
                            {{ status_form.csrf_token }}
                        </form>
                    {% else %}
                        You don't have permission to change status.
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="trash-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Delete sketch</h4>
                </div>
                <div class="modal-body">
                    {% if sketch.has_permission(user=current_user, permission='delete') %}
                        <strong>Are you sure you want to delete this sketch?</strong>
                        <br><br>
                        <form action="{{ url_for('sketch_views.overview', sketch_id=sketch.id) }}" method="post">
                            <label>
                                {{ trash_form.confirm }} <span style="margin-left:7px;">Yes I'm sure</span>
                            </label>
                            <br><hr>
                            <button style="margin-right:7px;" class="btn btn-default" data-dismiss="modal">No, cancel and take me back!</button>
                            <button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i> Delete this sketch</button>
                            {{ status_form.csrf_token }}
                        </form>
                    {% else %}
                        You don't have permission to delete this sketch.
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card" style="padding-left:30px; padding-bottom: 30px;">
                    <div class="pull-right" style="margin-right:10px;margin-top:10px;">
                        <div class="btn-group">
                            {% if sketch.has_permission(user=current_user, permission='write') %}
                                <button class="btn btn-default" data-toggle="modal" data-target="#edit-sketch-modal"><i class="fa fa-pencil"></i></button>
                            {% endif %}

                            {% if sketch.has_permission(user=current_user, permission='delete') %}
                                <button class="btn btn-default" data-toggle="modal" data-target="#trash-modal"><i class="fa fa-trash"></i></button>
                            {% endif %}
                        </div>
                    </div>
                    <h3 style="margin-top:10px;">{{ sketch.name }}</h3>
                    <p style="white-space: pre-wrap;word-wrap: break-word; max-width: 800px;">{{ sketch.description }}</p>

                    {% if sketch.collaborators or sketch.groups %}
                        <br>
                        <span style="margin-right:10px;">Shared with</span>
                        {% for group in sketch.groups %}
                            <span class="label label-default" style="font-size: 0.9em;" title="Shared with group {{ group.name }}"><i class="fa fa-group"></i>{{ group.name }}</span>
                        {% endfor %}
                        {% for collaborator in sketch.collaborators %}
                            <span class="label label-default" style="font-size: 0.9em;" title="Shared with user {{ collaborator.username }}"><i class="fa fa-user"></i>{{ collaborator.username }}</span>
                        {% endfor %}
                    {% endif %}
                </div>
            </div>
        </div>

        {% if sketch.has_permission(user=current_user, permission='write') and not sketch.timelines %}
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="text-center" style="padding:100px;">
                            <h3 style="color:#777"><i class="fa fa-meh-o"></i> No data to analyze</h3>
                            <a class="btn btn-success" href="{{ url_for('sketch_views.timelines', sketch_id=sketch.id) }}"><i class="fa fa-plus"></i> Add timeline</a>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        {% if sketch.timelines %}
            <!-- Single metric info cards -->
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="text-center">
                            <h1>{{ sketch.timelines|length }}</h1>
                            Timelines
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="text-center">
                            <ts-count-events sketch-id="{{ sketch.id }}"></ts-count-events>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="card" style="min-height:300px;">
                        <h4>Timelines</h4>
                        <ts-timelines-list sketch-id="{{ sketch.id }}" show-delete="false"></ts-timelines-list>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card" style="min-height: 300px;">
                        <h4>Views</h4>
                        <ts-saved-view-list sketch-id="{{ sketch.id }}"></ts-saved-view-list>
                    </div>
                </div>
            </div>
        {% endif %}

{% endblock %}
