<!DOCTYPE html>
<html lang="en">
<head>
    <title>{% block title %}REIndicator{% endblock %}</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="shortcut icon" href="/media/icons/favicon.ico" />
    {% block head_block %}
    {% endblock %}
    {% load removeSpace_filter %}
    {% if user.is_authenticated %}
    <!-- Youtube video embedding -->
    <link rel="stylesheet" href="/static/css/versionLaunchVideo.css">
    <link rel="stylesheet" href="/static/css/magnific-popup.min.css">
    <script src="/static/js/jquery.magnific-popup.min.js"></script>
    {% endif %}
    <script type='text/javascript'>
        {% for alert in alerts %}
        alert("{{ alert.msg }}");
        {% endfor %}
    </script>
</head>
<body>
    <div id="topbar" class="topbar topnav">
        {% block topbar %}
            <a href="https://reindicator.com" title="Home - REIndicator"><img src="/media/images/logo1.png" align="left" height="50" alt="REIndicator homepage"></a>
            {% if user.is_authenticated %}
            <div class="topbar-dropdown">
                <a href="javascript:void(0);" class="icon dropbtn" onclick="menu_dropdown()">
                    <i class="fa fa-bars"></i>
                </a>
                
                <div id="dropdownContent" class="topbar-dropdown-content">
                    <a href="/admin"><i class="fa fa-cog" aria-hidden="true"></i> Settings</a>
                    {% if not user|has_group:"Hiatus" %}
                    <a onclick="printPDF()"><i class="fa fa-print" aria-hidden="true"></i> Print</a>
                    <a href='https://info.reindicator.com/new-member-welcome-notes/' target='_blank'><i class="fa fa-exclamation-circle" aria-hidden="true"></i> New Members Start Here</a>
                    <a href="https://info.reindicator.com/webinar-replays/" target='_blank'><i class="fa fa-play-circle-o" aria-hidden="true"></i> Webinar Replays</a>
                    <a href = "https://info.reindicator.com/" target='_blank'><i class="fa fa-life-ring" aria-hidden="true"></i> Support</a>
                    {% if not user|has_group:"MDM1" %}
                    <a href='#videoPopup' class="versionVideoLink" target='_blank'>Learn About Version 3.7</a>
                    <a href='https://us06web.zoom.us/j/83094675282' class="webinarLink" target='_blank'>Next Webinar: Topic: Industry Trends, Part 2 <span style='color:#e9ff19;'>March 1, 2024, 2PM ET</span></a>
                    {% endif %}
                    <a href = "https://calendly.com/reindicator/member-strategy-session" style="position:relative;" target='_blank'> Click here to schedule<br>a Quick Strategy Call with Scott</a>
                    {% endif %}
                    <a href="/logout"><i class="fa fa-sign-out" aria-hidden="true"></i> Log Out</a>
                </div>
            </div>
            {% if not user|has_group:"Hiatus" and not user|has_group:"MDM1" %}
            <div class="webinarLinkDiv" style="width: 224px;"><a href='https://us06web.zoom.us/j/83094675282' class="webinarLink" target='_blank'>Next Webinar: Topic: Industry Trends, Part 2 <span style='color:#e9ff19;'>March 1, 2024, 2PM ET</span></a></div>
            <div class="versionVideoLinkDiv w100ForSmall"><a href='#videoPopup' class="versionVideoLink" target='_blank'>Learn About Version 3.7</a></div>
            <div id="videoPopup" class="mfp-hide embed-responsive embed-responsive-21by9">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/XK86mnBWgAI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
            </div>
            {% endif %}
            <div class = "control-buttons" style="float: right;">
                {% if not user|has_group:"Hiatus" %}
                <a id="printBtn" title="Print" onclick="printPDF()"><img src="/media/icons/print1.svg" class="printBtn menu-button" /></a>
                {% endif %}
                <a href="/admin" title="Settings" ><img src="/media/icons/setting1.svg" class="settingBtn menu-button" /></a>
                <a href="{% url 'logout' %}?next=/" title="Log Out" style="margin: 0px 15px 0 0;"><img src="/media/icons/logout1.svg" class="logoutBtn menu-button" /></a>
            </div>
            <div class = "welcome-user">
                <div class = 'welcom_msg'>
                    <span>
                        Welcome,
                        <strong>{% firstof user.get_short_name user.get_username %}</strong>.
                    </span>
                </div>
            </div>
            {% if not user|has_group:"Hiatus" %}
            <div class = "help-link" style="float: right;">
                <div class="helpLinkDiv w100ForSmall"><a href='https://info.reindicator.com/new-member-welcome-notes/' class="helpLink" target='_blank'>New Members Start Here</a></div>
                <div class="helpLinkDiv"><a href='https://info.reindicator.com/webinar-replays/' class="helpLink" target='_blank'>Replays</a></div>
                <div class="helpLinkDiv"><a href='https://info.reindicator.com/' class="helpLink" target='_blank'>Support</a></div>
                <div class="helpLinkDiv" style="position: relative;">
                    <a href='https://calendly.com/reindicator/member-strategy-session' class="helpLink" target='_blank'>Click here to schedule<br>a Quick Strategy Call with Scott</a>
                </div>
            </div>
            {% endif %}
            {% else %}
            <a href="/login" title="Log In" style="margin: 15px 15px 0 0;"><img src="/media/icons/login1.svg" class="loginBtn menu-button" /></a>
            {% endif %}
        {% endblock %}
    </div>
    
    <div id="content">
        {% block content %}{% endblock %}
    </div>
    <div id="buttonoverlay">
        {% block buttonoverlay %}{% endblock %}
    </div>

    <div id="dropdown" class="dropdown">
        {% block dropdown %}{% endblock %}
    </div>
    <div id="drawer" class="drawer">
        {% block drawer %}{% endblock %}
    </div>

    {% block map %}{% endblock %}

    {% block map_scripts %}{% endblock %}
    {% block very_bottom %}{% endblock %}

    <script>
    function menu_dropdown() {
        document.getElementById("dropdownContent").classList.toggle("show");
    }

    // Close the dropdown if the user clicks outside of it
    document.onclick = function(event) {
        if (!event.target.matches('.dropbtn') && !event.target.matches('.fa-bars')) {
            var dropdowns = document.getElementsByClassName("topbar-dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }
    {% if user.is_authenticated and not user|has_group:"Hiatus" and not user|has_group:"MDM1" %}
    $('.versionVideoLink').magnificPopup({
        type:'inline',
        midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
    });
    {% endif %}
    </script>
</body>
</html>
