{#
  Copyright (C) 2020-2023 Graz University of Technology.

  invenio-theme-iform is free software; you can redistribute it and/or
  modify it under the terms of the MIT License; see LICENSE file for more
  details.
#}
{%- extends config.INVENIO_THEME_IFORM_BASE_TEMPLATE %}

{%- set active_dashboard_menu_item = "overview" %}
{%- set title = "Overview" %}

{% block javascript %}
    {{ super() }}
    {{ webpack['invenio-theme-iform-unlock.js'] }}
{% endblock javascript %}

{%- block page_body %}
    {%- block user_dashboard_header %}
        {% include "invenio_app_rdm/users/header.html" %}
    {%- endblock user_dashboard_header %}

    <div class="ui container rel-mt-2">
        <h2>Overview</h2>

        <div class="ui five column stackable grid overview">
            {% if is_iform_authenticated %}
                {# 3 columns: Research-Uploads, Communities, and Requests #}
                <div class="column">
                    <div class="ui segment" style="height: 480px">
                        <h2>{{ _("Research Results") }}</h2>
                        <a class="ui left floated image" href="/me/uploads">
                            <img
                                width="400px"
                                alt="Research Results"
                                src="{{ url_for('static', filename='images/diamond.svg') }}"
                            />
                        </a>
                            {{ _("Research results gives the base on which publications are built.") }}
                    </div>
                </div>
                <div class="column">
                    <div class="ui segment" style="height: 480px">
                        <h2>{{ _("Communities") }}</h2>
                        <a class="ui left floated image" href="/me/communities">
                            <img
                                width="400px"
                                alt="Communities"
                                src="{{ url_for('static', filename='images/group-discussion.svg') }}"
                            />
                        </a>
                        <div>{{ _("Grow a community of individuals to sustain the platform going forward and thereby organize, curate and collaborate on records for your institution, project, topic or event.") }}</div>
                    </div>
                </div>
                <div class="column">
                    <div class="ui segment" style="height: 480px">
                        <h2>{{ _("Requests") }}</h2>
                        <a class="ui left floated image" href="/me/requests">
                            <img
                                width="400px"
                                alt="Requests"
                                src="{{ url_for('static', filename='images/umbrella.svg') }}"
                            />
                        </a>
                        <div>{{ _("Check for incoming notifications and community assignments or inquiries.") }}</div>
                    </div>
                </div>
            {% else %}
                {# not is_iform_authenticated #}
                {# 1 column: greyed out Research-Uploads #}
                <div class="column">
                    {# a modal's HTML can be placed anywhere, so I placed it here, right before it's used #}
                    <div class="ui small modal" id="iform-unlock-modal">
                        <div class="header">{{ _("On unlocking research uploads") }}</div>
                        <div class="content">
                                {{ _("To ensure a well-curated repository, new users need to get unlocked
              before being allowed to upload. Once unlocked, you can upload your research,
              request its inclusion in a community, generate a DOI for it, and publish it.") }}
                            <div id="anchor-unlock-form">
                                {# will be replaced with ZammadForm when generating it #}
                                <button
                                    class="ui fluid button"
                                    onclick="
                $('#iform-unlock-modal')
                .modal('hide')"
                                >
                                    Got it!
                                </button>
                                <button id="generate-unlock-form" class="ui fluid button">
                                    {{ _("Request unlocking") }}
                                </button>
                            </div>
                        </div>
                    </div>

                    {# actual column contents start here #}
                    <div class="ui disabled segment" style="height: 480px">
                        <h2>{{ _("Research Results") }}</h2>
                        <div
                            class="ui left floated image"
                            style="cursor: pointer"
                            onclick="
            $('#iform-unlock-modal')
            .modal('show')"
                        >
                            <img
                                width="400px"
                                alt="Research Results"
                                src="{{ url_for('static', filename='images/diamond.svg') }}"
                            />
                        </div>
                            {{ _("Research results gives the base on which publications are built.") }}
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
{%- endblock %}