<!doctype html>
<html class="no-js" lang="en" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ gallery_title|default_if_none:"OMERO.gallery" }}</title>

        {% if favicon %}
        <link rel="shortcut icon" type="image/x-icon" href="{{ favicon }}">
        {% else %}
        <link rel="shortcut icon" type="image/x-icon" href="{% static 'idr_gallery/images/favicon.ico' %}?_={{VERSION}}">
        {% endif %}
        <link rel="stylesheet" type="text/css" media="all" href="//fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic">
        <link rel="stylesheet" type="text/css" media="all" href="//fonts.googleapis.com/css?family=Nunito">
        <link href="{% static 'idr_gallery/3rdparty/foundation/foundation.min.css' %}?_={{VERSION}}" rel="stylesheet">
        <link href="{% static 'idr_gallery/css/openmicroscopy.css' %}?_={{VERSION}}" rel="stylesheet">
        <link href="{% static 'idr_gallery/css/idr.css' %}?_={{VERSION}}" rel="stylesheet">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
        <!-- Babel polfill (Symbol, Promise) -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
        <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">

        <script src="{% static 'idr_gallery/3rdparty/foundation/foundation.min.js' %}"></script>
        <script src="{{ base_url }}about/js/version.js"></script>


        <script src="{% static 'idr_gallery/model.js' %}?_={{VERSION}}"></script>
        <link href="{% static 'idr_gallery/studies.css' %}?_={{VERSION}}" rel="stylesheet">
    </head>

    <body>

        <div class="main-nav-bar top-bar" id="main-menu">
            <div class="top-bar-left">
                <ul class="dropdown menu" data-dropdown-menu>
                    <li>
                        {% if top_left_logo.href %}
                        <a class="logo" href="{{ top_left_logo.href }}">
                        {% endif %}
                            {% if top_left_logo.src %}
                            <img src="{{ top_left_logo.src }}" alt="{{ top_left_logo.alt }}"/>
                            {% else %}
                            <img src="{% static 'gallery/images/omero.svg' %}" alt="{{ top_left_logo.alt }}"/>
                            {% endif %}
                        {% if top_left_logo.href %}
                        </a>
                        {% endif %}
                    </li>


                    {% for c, data in super_categories.items %}
                    <li>
                        <a href="{% url 'gallery_super_category' super_category=c %}"
                           {% if c == category %}style="color: #ff9800"{% endif %}>
                          {{ data.label }}
                        </a>
                    </li>
                    {% endfor %}
                </ul>
            </div>

            <div id="top-bar-right" class="top-bar-right">
                <ul class="dropdown menu" data-dropdown-menu>
                {% for link in top_right_links %}
                    <li class="{% if link.submenu %}has-submenu{% endif %}">
                        <a href="{{ link.href }}">{{ link.text }}</a>
                        {% if link.submenu %}
                            <ul class='submenu menu vertical' data-submenu>
                            {% for l in link.submenu %}
                               <li><a href="{{ l.href }}">{{ l.text }}</a></li>
                            {% endfor %}
                            </ul>
                        {% endif %}
                    </li>
                {% endfor %}
                </ul>
            </div>
        </div>

        <a name="page-top"></a>


        {% block content %}

        {% endblock %}

        <hr class="whitespace">

        <div class="callout large secondary">
            <div class="row">
                <div class="row small-up-2 medium-up-5 large-up-5">
                    <div class="column"><a href="https://www.openmicroscopy.org/" target="_blank"><img class="thumbnail their-logo" src="{{ base_url }}about/img/logos/ome-logo-200.png" alt="OME"></a></div>
                    <div class="column"><a href="https://www.eurobioimaging.eu/" target="_blank"><img class="thumbnail their-logo" src="{{ base_url }}about/img/logos/eurobioimaging_logo.png" alt="Euro-Bioimaging"></a></div>
                    <div class="column"><a href="https://www.globalbioimaging.org/" target="_blank"><img class="thumbnail their-logo" src="{{ base_url }}about/img/logos/globalbioimaging_logo.png" alt="Global-Bioimaging"></a></div>
                    <div class="column"><a href="https://www.bbsrc.ac.uk/" target="_blank"><img class="thumbnail their-logo" src="{{ base_url }}about/img/logos/bbsrc.png" alt="BBSRC"></a></div>
                    <div class="column"><a href="https://ec.europa.eu/programmes/horizon2020/" target="_blank"><img class="thumbnail their-logo" src="{{ base_url }}about/img/logos/h2020.png" alt="Horizon"></a></div>
                </div>
                <hr class="whitespace">
                <div class="large-12 columns text-center">
                    <p>&copy; 2016-2022 University of Dundee &amp; Open Microscopy Environment. <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">Creative Commons Attribution 4.0 International License</a>.</p>
                    <p>OMERO is distributed under the terms of the GNU GPL. For more information, visit <a href="https://www.openmicroscopy.org">openmicroscopy.org</a></p>
                </div>
                <hr class="whitespace">
                <div>
                    <div class="version-number float-left">
                        <a href="{{ base_url }}"><img id="version-number" src="{{ base_url }}about/img/logos/logo-idr.svg" alt="IDR logo"></a>
                        version: <span id="version-number-display"></span>.
                    </div>
                    <div class="float-right">
                        <a href="https://www.twitter.com/idrnews" target="_blank"><i class="fab fa-fw fa-twitter"></i> @IDRnews</a></li>
                        <a href="https://www.twitter.com/idrstatus" target="_blank"><i class="fab fa-fw fa-twitter"></i> @IDRstatus</a></li>
                    </div>
                </div>
            </div>
        </div>

        <script>
            $(document).foundation();
        </script>

    </body>

</html>
