{% extends "layout_maps.html" %}

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

{% block maps_menu %}
{% if current_user.is_authenticated %}
<a class="nav-link" href="{{ url_for('map.index') }}">My maps</a>
{% endif %}
{% endblock %}

{% block content %}
{% if maps %}
<div class="row">
    <div class="col">
        <h1>Published maps</h1>
        <br />
    </div>
</div>
<div class="row row-cols-1 row-cols-md-3">
    {% for map in 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-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>
{% else %}
<div class="row">
    <div class="col">
        <p class="alert alert-info" role="alert">
            Currently, nobody has published a topic map. 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 %}
{% endblock %}