<!DOCTYPE html>
{% load static i18n %}
{% load icon_tags %}
{% load socialaccount %}
{% load terms_tags %}
{% load tabnav_tags %}
{% load notifications_tags %}

<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Cloud service for storing and analysis surface topography measurements">
    <meta name="author" content="Michael Röttger, Lars Pastewka">
    <meta name="keywords" content="roughness, surface finish, contact calculator, contact mechanics">

    <title>contact.engineering - Store and analyze surface topography measurements</title>

    <link rel="icon" type="image/x-icon" href="{% static 'images/favicons/favicon.png' %}"/>

    <script src="{% static 'js/base.bundle.js' %}"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
            crossorigin="anonymous"></script>

    <link href="{% static 'tagulous/lib/select2-4/css/select2.min.css' %}" rel="stylesheet">

    {% block extra_css %}{% endblock extra_css %}
</head>

<body id="page-top" lang="en-US">

<div class="fixed-top">
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">

        <!-- Navbar -->

        {# Logo / name of the application #}
        <a class="navbar-brand ms-3" href="{% url 'home' %}"><img src="{% static 'images/ce_logo.svg' %}" height="25px">&nbsp
            contact.engineering</a>
        {% if request %}  {# in case of error 500, there is no request #}
            <div class="collapse navbar-collapse" id="navbar_supported_content">

                {# Search Bar #}
                <div class="navbar-nav flex-grow-1">
                    <form class="form-inline" action="{% url 'ce_ui:select' %}" method="get">
                        <div class="input-group" id="global-search">
                            <label class="sr-only" for="global-search-input">Search Term</label>
                            <input class="form-control" type="search" id="global-search-input"
                                   placeholder="Search names, descriptions, and tags" name="search">
                            <button class="btn btn-outline-secondary" type="submit">{% fa5_icon 'search' %}</button>
                            <button class="btn btn-outline-secondary" type="button"
                                    data-toggle="modal" data-target="#search-help-modal"
                                    title="Tipps for searching">{% fa5_icon 'info-circle' %}</button>
                        </div>
                    </form>
                </div>

                <ul class="navbar-nav ml-auto">
                    <!-- sidebar position start-->
                    <div class="wrapper" id="sidebar-main">
                        <!-- Sidebar -->

                        <nav id="sidebar">
                            <ul class="list-unstyled components">
                                <li id="notification-content">
                                    <div class="notif-container">
                                        <div class="live_notify_list">
                                        </div>
                                    </div>
                                </li>
                                <li id="user-profile-details-content">
                                    {% if not request.user.is_anonymous and request.user.username %}
                                        <a class="btn btn-default" role="button"
                                           href="{% url 'users:detail' request.user.username %}">User profile</a>
                                        {% if request.user.is_staff %}
                                            <div class="btn-group-vertical mt-2">
                                                <a class="btn btn-default" role="button" href="{% url 'admin:index' %}">Admin
                                                    interface</a>
                                                <a class="btn btn-default" role="button"
                                                   href="{% url 'watchman:dashboard' %}">Watchman
                                                    dashboard</a>
                                                <a class="btn btn-default" role="button"
                                                   href="{% url 'watchman:status' %}">Watchman
                                                    status (JSON)</a>
                                            </div>
                                        {% endif %}
                                        <a class="btn btn-default mt-2" role="button" data-toggle="modal"
                                           data-target="#version-modal">Version information</a>
                                        <a class="btn btn-default mt-2" role="button" href="{% url 'terms' %}">Terms
                                            &amp; conditions</a>
                                        <div class="btn-group-vertical mt-2">
                                            <a class="btn btn-default" role="button" href="{% url 'help' %}">Help</a>
                                            <a class="btn btn-default" role="button" target="_blank"
                                               href="https://github.com/ContactEngineering/TopoBank/discussions">Feedback</a>
                                            <a class="btn btn-default" role="button" data-toggle="modal"
                                               data-target="#contact-modal">Contact</a>
                                        </div>
                                        <a class="btn btn-default mt-2" role="button" target="_blank"
                                           href="https://doi.org/10.1088/2051-672X/ac860a">Read our
                                            paper!</a>
                                        <a class="btn btn-default mt-2" role="button" data-toggle="modal"
                                           data-target="#logout-modal">Sign
                                            Out</a>
                                    {% else %}
                                        <a class="btn btn-default" role="button"
                                           href="{% provider_login_url 'orcid' method="oauth2" %}">Sign in</a>
                                    {% endif %}
                                </li>

                            </ul>
                        </nav>

                    </div>

                    <!-- sidebar position end-->

                    {% if not request.user.is_anonymous %}
                        <li class="nav-item">
                            <a class="nav-link" id="help-dropdown" role="button" onclick="toggleNotificationNav()">
                                {% live_notify_badge badge_class="badge badge-info badge-pill live_notify_badge" %}
                                <i class="fa fa-bell"></i>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link me-3" id="user-dropdown" role="button" onclick="toggleUserNav()">
                                <i class="fa fa-user-circle fa-fw" aria-hidden="true"></i>
                                {% if not request.user.is_anonymous %}
                                    {{ request.user.name }}
                                {% endif %}
                            </a>
                        </li>
                    {% else %} {# user is anonymous #}
                        <li class="nav-item">
                            <a class="btn btn-secondary me-3" href="{% provider_login_url 'orcid' method="oauth2" %}">
                                Sign in
                            </a>
                        </li>
                    {% endif %} {# if user is not anonymous #}

                </ul>

            </div>
        {% endif %}
    </nav>

    {% tab_navigation %}
</div>

<div id="wrapper">
    <div id="content-wrapper">

        <div class="container-fluid mt-1">
            {# Places Messages #}
            {% if messages %}
                {% for message in messages %}
                    <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">{{ message }}</div>
                {% endfor %}
            {% endif %}

            {# Insert actual content, see other templates #}
            {% block content %}
            {% endblock content %}
        </div>
        <!-- /#container-fluid -->
    </div>

    {# Check for terms and conditions, show a pop up if there are changes #}
    {# show_terms_if_not_agreed #} {# <- enable by replacing # with % #}
    {# Note that the user can close the modal and it is reopened every new view #}

    <!-- /#content-wrapper -->
</div>

<footer class="sticky-footer">
    <div class="container my-auto">
        <div class="copyright text-center my-auto">
            <a href="https://pastewka.org/" target="_blank">
                <img src="{% static 'images/uni_freiburg_logo.png' %}" height="64px"></img>
            </a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="http://www.engineering.pitt.edu/TevisJacobs/" target="_blank">
                <img src="{% static 'images/pitt_logo.png' %}" height="64px"></img>
            </a>
            &nbsp&nbsp&nbsp&#8213;&nbsp&nbsp&nbsp
            Funding by
            &nbsp&nbsp&nbsp
            <a href="https://cordis.europa.eu/project/rcn/212185_en.html" target="_blank">
                <img src="{% static 'images/erc_logo.png' %}" height="64px"></img>
            </a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="https://www.livmats.uni-freiburg.de/" target="_blank">
                <img src="{% static 'images/logo_livmats_small.jpg' %}" height="64px"></img>
            </a>
        </div>
    </div>
</footer>

<!-- /#page-wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top" style="display: inline;">
    <i class="fa fa-angle-up"></i>
</a>

<!-- Logout Modal-->
<div class="modal fade" id="logout-modal" tabindex="-1" role="dialog" aria-labelledby="example-modal-label"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="example-modal-label">Ready to Leave?</h5>
                <button class="btn-close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"></span>
                </button>
            </div>
            <div class="modal-body">Select "Sign Out" below if you are ready to end your current session.</div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                <a class="btn btn-primary" href="{% url 'account_logout' %}">{% trans "Sign out" %}</a>
            </div>
        </div>
    </div>
</div>

<!-- Version Modal-->
<div class="modal modal-lg" id="version-modal" tabindex="-1" role="dialog" aria-labelledby="version-modal-label"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="version-modal-label">Version information</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>
                    This cloud platform builds on the open source software packages summarized in the following list.
                </p>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>Module</th>
                        <th>Version</th>
                        {#  Maybe also add links? #}
                        <th>License</th>
                        <th>Links</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for key, value in versions.items %}
                        <tr>
                            <td>{{ key }}</td>
                            <td>{{ value.version }}</td>
                            <td>{{ value.license }}</td>
                            <td>
                                <a href="{{ value.homepage }}">Website</a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>

            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button" data-dismiss="modal">Ok</button>
            </div>
        </div>
    </div>
</div>

<!-- Contact Modal-->
<div class="modal fade" id="contact-modal" tabindex="-1" role="dialog" aria-labelledby="contact-modal-label"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="contact-modal-label">Contact</h5>
                <button class="btn-close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"></span>
                </button>
            </div>
            <div class="modal-body">
                <p>Is <em>contact.engineering</em> helpful for your research?</p>
                <p>We would like to hear from you. Please contact us, if you have any comments, suggestions, or bug
                    reports!</p>
                <div>
                    <ul>
                        <li>Participate at <a href="https://github.com/ComputationalMechanics/TopoBank/discussions"
                                              target="_blank">discussions
                            on GitHub</a>, or
                        </li>
                        <li>open an <a href="https://github.com/ComputationalMechanics/TopoBank/issues" target="_blank">issue
                            on
                            GitHub</a>, or
                        </li>
                        <li>drop us an <a href="mailto:{{ contact_email_address }}">email</a>.</li>
                    </ul>
                </div>
                <p>Thank you! The <em>contact.engineering</em> development team.</p>
                <p translate="no">
                    <em>
                        <a href="https://pastewka.org/" target="_blank">Simulation Group</a><br>
                        Department of Microsystems Engineering (IMTEK)<br>
                        University of Freiburg<br>
                        Georges-Koehler-Allee 103<br>
                        79110 Freiburg<br>
                        Germany<br>
                    </em>
                </p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button" data-dismiss="modal">Ok</button>
            </div>
        </div>
    </div>
</div>

<!-- Search Help Modal-->
<div class="modal fade" id="search-help-modal" tabindex="-1" role="dialog" aria-labelledby="search-help-modal-label"
     aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="search-help-modal-label">Tips for Searching</h5>
                <button class="btn-close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"></span>
                </button>
            </div>
            <div class="modal-body">
                <p>Searching is performed over these fields:</p>
                <ul>
                    <li>Names of surface and measurements</li>
                    <li>Names of tags</li>
                    <li>Descriptions of digital surface twins and measurements</li>
                </ul>

                <p>All texts in these fields are split into a vector of tokens. Searching means to find matches
                    of the search expression among these tokens. You can build search expression from search terms
                    as follows:</p>

                <table class="table table-bordered table-condensed">
                    <thead class="thead-light">
                    <th>Search result should list items with</th>
                    <th>Search expression</th>
                    <th>Comment</th>
                    </thead>
                    <tbody>
                    <tr>
                        <td>both <em>AFM</em> and <em>surface</em></td>
                        <td><input type="text" value="AFM surface" size="40" readonly></td>
                        <td>text not inside quote marks will be interpreted as AND</td>
                    </tr>
                    <tr>
                        <td>either <em>AFM</em> or <em>surface</em> or both</td>
                        <td><input type="text" value="AFM OR surface" size="40" readonly></td>
                        <td>logical OR, least precedence</td>
                    </tr>
                    <tr>
                        <td><em>AFM</em> but not <em>surface</em></td>
                        <td><input type="text" value="AFM -surface" size="40" readonly></td>
                        <td>the logical not operator is written by using -, has highest precedence</td>
                    </tr>
                    <tr>
                        <td>the phrase <em>AFM Surface</em></td>
                        <td><input type="text" value='"AFM surface"' size="40" readonly></td>
                        <td><em>AFM</em> and <em>surface</em> are found if next to each other</td>
                    </tr>
                    <tr>
                        <td><em>AFM Surface</em> as a phrase and <em>imported</em> somewhere else</td>
                        <td><input type="text" value='"AFM surface" imported' size="40" readonly></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td><em>AFM Surface</em> as a phrase and <em>imported</em> but not <em>material</em></td>
                        <td><input type="text" value='"AFM surface" imported -material' size="40" readonly></td>
                        <td>The above can also be combined. Parentheses are not allowed, all entries
                            are valid search expressions.
                        </td>
                    </tr>
                    </tbody>

                </table>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button" data-dismiss="modal">Ok</button>
            </div>
        </div>
    </div>
</div>

<!-- OpenSeadragon -->
<!-- This cannot be installed via NPM because scalebar and FileSaver is not available as a package -->
<script src={% static "vendor/openseadragon/openseadragon.min.js" %}></script>
<script src={% static "vendor/openseadragon/openseadragon-scalebar.js" %}></script>
<script src={% static "vendor/openseadragon/FileSaver.min.js" %}></script>

<!-- show new notifications immediately -->
<script src="{% static 'notifications/notify.js' %}" type="text/javascript"></script>
<script>

    var no_unread_notifications_html = '<div class="btn btn-secondary form-control" id="mark-all-as-read-btn" >No unread notifications</div>';

    function fill_notification_badge_or_hide_if_none(data) {
        var badges = document.getElementsByClassName(notify_badge_class);
        if (badges) {
            for (var i = 0; i < badges.length; i++) {
                var count;
                if (data === undefined) {
                    count = undefined;
                    badges[i].innerHTML = "";
                } else {
                    count = data.unread_count;
                    badges[i].innerHTML = count;
                }
                if ((count !== undefined) && (count > 0)) {
                    badges[i].style.display = "block"; // show
                } else {
                    badges[i].style.display = "none"; // hide
                }
            }
        }
    }

    function emtpy_notification_list() {
        var menus = document.getElementsByClassName(notify_menu_class);
        if (menus) {
            for (var i = 0; i < menus.length; i++) {
                menus[i].innerHTML = no_unread_notifications_html;
            }
        }
    }

    function fill_notification_list_with_linked_items(data) {
        var menus = document.getElementsByClassName(notify_menu_class);
        if (menus) {
            var messages = data.unread_list.map(function (item) {

                // We have to build the full url here, because the item slug not available when sending the notification
                var href = '/inbox/notifications/mark-as-read/' + item.slug + '/?next=';
                {# TODO remove hard-coded prefix #}
                var message = item.description;

                if ((item.data !== null) && (item.data.href !== null) && (typeof item.data.href !== 'undefined')) {
                    href += item.data.href;
                } else {
                    href += "#";
                }

                if (typeof item.timestamp !== 'undefined') {
                    var ts = new Date(item.timestamp);
                    message = message + " (<span>" + ts.toLocaleString() + "</span>)";
                }
                return '<a class="notification-item">' + message + '</a>';
                ;
            }).join('')

            if (messages.length == 0) {
                messages = no_unread_notifications_html;
            } else {
                messages += `<div class="btn btn-primary form-control" id="mark-all-as-read-btn" >Mark all as read</div>`;
            }

            // Not clear yet how to mark only those as read which where shown in the list,
            // probably we should do an API call in background like "api/unread_list/?max=3&mark_as_read=true"

            for (var i = 0; i < menus.length; i++) {
                menus[i].innerHTML = messages;
            }

            $("#mark-all-as-read-btn").click(function () {
                // console.log("Clicked marked all as read");
                // please_wait_notification_list();
                fill_notification_badge_or_hide_if_none(undefined); // hide badge
                $.ajax({
                    url: "{% url 'notifications:mark_all_as_read' %}",
                    success: function (data, textStatus, jqXHR) {
                        emtpy_notification_list();
                        // console.log("Successfully marked all notifications as read. status: "+textStatus);
                    },
                }); // mark all notifications as read in background
            })
        }
    }
</script>
{% register_notify_callbacks fetch=100 callbacks='fill_notification_badge_or_hide_if_none,fill_notification_list_with_linked_items' %}

{% block javascript %}{% endblock javascript %}
<!--sidebar js -->
<script>
    function toggleNotificationNav() {
        let sidebarElement = document.getElementById("sidebar-main");
        let notificationContentElement = document.getElementById("notification-content");
        let userProfileElement = document.getElementById("user-profile-details-content");
        if (!notificationContentElement.classList.contains("notification-block")) {
            sidebarElement.classList.add("sidebar-main-block");
            notificationContentElement.classList.add("notification-block");
            userProfileElement.classList.remove("user-block")
        } else {
            sidebarElement.classList.remove("sidebar-main-block");
            userProfileElement.classList.remove("user-block");
            notificationContentElement.classList.remove("notification-block");
        }
    }

    function toggleUserNav() {
        let sidebarElement = document.getElementById("sidebar-main");
        let notificationContentElement = document.getElementById("notification-content");
        let userProfileElement = document.getElementById("user-profile-details-content");
        if (!userProfileElement.classList.contains("user-block")) {
            sidebarElement.classList.add("sidebar-main-block");
            userProfileElement.classList.add("user-block");
            notificationContentElement.classList.remove("notification-block");
        } else {
            sidebarElement.classList.remove("sidebar-main-block");
            userProfileElement.classList.remove("user-block");
            notificationContentElement.classList.remove("notification-block");
        }
    }

</script>
</body>

</html>

