{% extends "layout_maps.html" %}

{% block title %}
<title>My topic maps | Contextualise</title>
{% endblock %}

{% block maps_menu %}
<a class="nav-link" href="{{ url_for('map.published') }}">Published maps</a>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col">
        <h1>My maps</h1>
        <br />
    </div>
</div>
<ul class="nav nav-tabs" id="mapsTab" role="tablist">
    <li class="nav-item">
        <a aria-controls="my-maps" aria-selected="true" class="nav-link active" data-toggle="tab" href="#my-maps"
            id="my-maps-tab" role="tab">Maps I own</a>
    </li>
    <li class="nav-item">
        <a aria-controls="collaboration-maps" aria-selected="false" class="nav-link" data-toggle="tab"
            href="#collaboration-maps" id="collaboration-maps-tab" role="tab">Maps I am collaborating on</a>
    </li>
</ul>
<div class="tab-content" id="mapsTabContent">
    <div aria-labelledby="my-maps-tab" class="tab-pane fade show active" id="my-maps" role="tabpanel">
        {% if own_maps %}
        <div class="row row-cols-1 row-cols-md-3">
            {% for map in own_maps %}
            <div class="col mb-4">
                <div class="card h-100 shadow-sm">
                    <a href="{{ url_for('topic.view', map_identifier=map['identifier'], topic_identifier='home') }}">
                        <img alt="{{ map.name }}" class="card-img-top"
                            src="/static/resources/{{ map.identifier }}/{{ map.image_path }}">
                    </a>
                    <div class="card-header">
                        {% if map.published %}
                        <span class="badge badge-success">Published</span>
                        {% else %}
                        <span class="badge badge-warning">Private</span>
                        {% endif %}
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">
                            {{ map.name }}
                        </h5>
                        <p class="card-text">{{ map.description }}</p>
                    </div>
                    <div class="card-footer">
                        <div class="btn-group">
                            <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button"
                                id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
                                Options
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item"
                                    href="{{ url_for('topic.view', map_identifier=map['identifier'], topic_identifier='home') }}">View
                                    map</a>
                                <a class="dropdown-item"
                                    href="{{ url_for('note.index', map_identifier=map['identifier']) }}">View notes</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item"
                                    href="{{ url_for('map.view', map_identifier=map['identifier']) }}">View map
                                    details</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}
        <div class="row">
            <div class="col">
                {% if not own_maps %}
                <p class="alert alert-info" role="alert">
                    No topic maps. Click on the "Create map" button below to create a topic map.
                </p>
                <br />
                <br />
                <p class="text-center">
                    <img width="520" class="img-fluid" src="{{ url_for('static', filename='blank-canvas.svg') }}">
                </p>
                {% endif %}
                <a class="btn btn-primary" href="{{ url_for('map.create') }}">Create map</a>
            </div>
        </div>
    </div>
    <div aria-labelledby="collaboration-maps-tab" class="tab-pane fade" id="collaboration-maps" role="tabpanel">
        {% if collaboration_maps %}
        <div class="row row-cols-1 row-cols-md-3">
            {% for map in collaboration_maps %}
            <div class="col mb-4">
                <div class="card h-100 shadow-sm">
                    <a href="{{ url_for('topic.view', map_identifier=map['identifier'], topic_identifier='home') }}">
                        <img alt="{{ map.name }}" class="card-img-top"
                            src="/static/resources/{{ map.identifier }}/{{ map.image_path }}">
                    </a>
                    <div class="card-header">
                        {% if map.collaboration_mode.name == "VIEW" %}
                        <span class="badge badge-info">Can view</span>
                        {% elif map.collaboration_mode.name == "COMMENT" %}
                        <span class="badge badge-secondary">Can comment</span>
                        {% else %}
                        <span class="badge badge-warning">Can edit</span>
                        {% endif %}
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">
                            {{ map.name }}
                        </h5>
                        <p class="card-text">{{ map.description }}</p>
                    </div>
                    <div class="card-footer">
                        <div class="btn-group">
                            <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button"
                                id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
                                Options
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item"
                                    href="{{ url_for('topic.view', map_identifier=map['identifier'], topic_identifier='home') }}">View
                                    map</a>
                                <a class="dropdown-item"
                                    href="{{ url_for('note.index', map_identifier=map['identifier']) }}">View notes</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item"
                                    href="{{ url_for('map.view', map_identifier=map['identifier']) }}">View map
                                    details</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}
        {% if not collaboration_maps %}
        <div class="row">
            <div class="col">
                <p class="alert alert-info" role="alert">
                    Currently, nobody has shared a topic map with you for the purpose of collaboration. Patience, my
                    friend, patience!
                </p>
                <br />
                <br />
                <p class="text-center">
                    <img width="410" class="img-fluid" src="{{ url_for('static', filename='void.svg') }}">
                </p>
            </div>
        </div>
        {% endif %}
    </div>
</div>
<br />
{% endblock %}