{% load static %}
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="google-site-verification" content="5BaDU3C3ougJeTQQ4GDfyf33NqV9xNKfyhbX90KkJpc" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta property="og:url" content="https://nlptweets.herokuapp.com" />
    <meta property="og:title" content="Twitter Data Analysis" />
    <meta property="og:description"
        content="Visualize Sentiments and Retweet Status on Twitter real time data with different types of Authentication" />
    <meta name="author" content="Nanthakumar J J">
    <meta property="og:image" content="https://nlptweets.herokuapp.com{% static 'twitter.jpg' %}" />
    <title>{% block title %} {{title}} {% endblock %}</title>


    <link rel="shortcut icon" href="{%  static 'favicon.ico' %}">
    <!-- CSS only -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Changa+One&family=Noto+Sans:wght@700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
        integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- JS, Popper.js, and jQuery -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="{% static 'css/footer.css' %}">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.0/html2pdf.bundle.js" integrity="sha512-VqCeCECsaE2fYTxvPQk+OJ7+SQxzI1xZ6IqxuWd0GPKaJoeSFqeakVqNpMbx1AArieciBF71poL0dYTMiNgVxA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.1/xlsx.full.min.js"></script> 
    <script src="https://code.jquery.com/jquery-3.5.1.js"
        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"
        integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ=="
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>
    <script src="{% static 'getconfig.js' %}"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        console.log()
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
        $(document).ready(function () {
            $("#msgcontainer2").delay(4200).fadeOut('slow');
            $(".fixed-top").delay(4200).fadeOut('slow');
            var checkers = ["nlptweets.herokuapp.com", "localhost:8000", "127.0.0.0.1:8000"]
            var elem = document.getElementById('profileImage');
            if (checkers.includes(elem.src.split('//')[1].split('/')[0]))
                elem.src = getInitials('{{user}}') || '';
        });

        const getInitials = function (name) {
            var canvas = document.createElement('canvas');
            canvas.style.display = 'none';
            canvas.width = '30';
            canvas.height = '30';
            document.body.appendChild(canvas);
            var context = canvas.getContext('2d');
            context.fillStyle = "#512DA8";
            context.fillRect(0, 0, canvas.width, canvas.height);
            context.font = "16px Arial";
            context.fillStyle = "white";
            var first, last;
            if (name && name != '') {
                first = name[0];
                last = null;
                if (last) {
                    var initials = first + last;
                    context.fillText(initials.toUpperCase(), 3, 23);
                } else {
                    var initials = first;
                    context.fillText(initials.toUpperCase(), 9, 21);
                }
                var data = canvas.toDataURL();
                document.body.removeChild(canvas);
                return data;
            } else {
                return false;
            }
        }
        function myFunction() {
            myVar = setTimeout(function () {
                $("nav").hide();
            }, 5000);
        }
        function myStopFunction() {
            if (typeof myVar != 'undefined') {
                clearTimeout(myVar);
            }
        }

    </script>

    <style>
        body {
            background: url('/static/bgimg4.jpg');
            background-size: cover;
        }
    </style>

</head>

<body>
    <div id="base">
        <div>
            <nav class="navbar navbar-expand-lg navbar-light justify-content-between"
                style="background-color: #e3f2fd;">
                <a class="navbar-brand" href="#"><img src="{% static 'logo.jpg' %}" width="30" height="30" /></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
                    aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                    <ul class="navbar-nav">
                        <li class="nav-item {% if title == 'Home' %}active{% endif %}">
                            <a class="nav-link" href="{% url 'home' %}">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item {% if title == 'About' %}active{% endif %}">
                            <a class="nav-link" href="{% url 'about' %}">About</a>
                        </li>
                        <li class="nav-item {% if title == 'Privacy Policy' %}active{% endif %}">
                            <a class="nav-link" href="{% url 'privacy' %}">Privacy Policy</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Innovators
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a style="background-color:#8a2be2;color:white" class="dropdown-item"
                                    href="https://www.linkedin.com/in/nanthakumarjj-b58335148/"
                                    target="_blank">Nanthakumar
                                    J
                                    J</a>
                            </div>
                        </li>
                        <li class="nav-item {% if title == 'Contact Us' %}active{% endif %}">
                            <a class="nav-link" href="{% url 'contact' %}">Contact Us</a>
                        </li>

                    </ul>
                    {% if not user.is_authenticated %}
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link"
                                href="{% if title != 'Login'%}{% url 'login' %}{% else %}{% url 'register' %}{% endif %}">{% if title != 'Login'%}Login{% else %}Register{% endif %}<i
                                    class="fa {% if title != 'Login'%}fa-sign-in{% else %}fa-user-plus{% endif %}"></i>
                            </a>
                        </li>
                    </ul>
                    {% else %}
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'logout' %}">Logout&nbsp;<i class="fa fa-sign-out"></i>
                            </a>
                        </li>
                        <li class="nav-item">
                            <img id="profileImage" style="border-radius: 50%;" width="50" height="50"
                                src="{{ user.socialaccount_set.all.0.get_avatar_url }}" />

                        </li>
                    </ul>
                    {% endif %}
                </div>
            </nav>
            {% if messages or form %}
            <div id="msgcontainer2" class="fixed-top">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-auto">
                            {% for message in messages %}
                            {% if 'error' in message.tags %}
                            <div class="alert alert-danger rounded-pill">
                                <div style="padding: 0px auto">
                                    <strong>{{ message }}</strong>
                                </div>
                            </div>
                            {% endif %}
                            {% endfor %}
                            {% for message in messages %}
                            {% if 'success' in message.tags %}
                            <div class="alert alert-success rounded-pill">
                                <div style="padding: 0px">
                                    <strong>{{ message }}</strong>
                                </div>
                            </div>
                            {% endif %}
                            {% endfor %}
                            {% for field in form %}
                            {% for error in field.errors %}
                            <div class="alert alert-danger rounded-pill">
                                <div style="padding: 0px">
                                    <strong>{{ error }}</strong>
                                </div>
                            </div>
                            {% endfor %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
        {% block content %}

        {% endblock content %}
    </div>

    <div id="loader" class="spinner">
    </div>
    <div class="spacer"></div>
    {% block javascript %}
    {% endblock javascript %}

</body>
</html>