<!doctype html>
    <title>{% block title %}{% endblock %}</title>
    <meta http-equiv='cache-control' content='no-cache'>
    <meta http-equiv='expires' content='0'>
    <meta http-equiv='pragma' content='no-cache'>
<head>
    <!--JQuery-->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

    <!--Semantic-->
    <script src="{{ url_for('static', filename='semantic.min.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='semantic.min.css') }}">

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

<body>
    <div class="ui bottom attached segment pushable">
        <!--Sidebar-->
        <div class="ui inverted left vertical sidebar menu">
            <a class="item" id="add_project_button"><i class="plus icon"></i>Add Project</a>
            {% for project, connections in data.items() %}
                <a href="/{{project | urlencode}}" class="item">{{project}} </a>
            {% endfor %}
        </div>
        <!--Page Content-->
        <div class="pusher">
            <div class="ui container" style="margin-top:20px;">
                {% for error in errors %}
                    <div class="ui negative message">
                        <i class="close icon"></i>
                        <div class="header">
                        Error
                        </div>
                        <p>{{error}}</p>
                    </div>
                {% endfor %}
                <button class="ui sticky button" onclick="toggle_sidebar()">Projects</button>
                {% block body %} {% endblock %}
            </div>
        </div>   
    </div>

    <!--Add Project Modal-->
    <div class="ui modal" id="project_modal">
        <form class="ui form">
            <div class="field">
              <label class="ui label" >Project Name</label>
              <input class="ui input" type="text" name="project_name" placeholder="Project Name" id="project_name">
            </div>
            <div class="actions">
                <div class="ui button">Cancel</div>
                <div class="ui button ok green">Create</div>
            </div>
        </form>
      </div>

    <script>
        function toggle_sidebar() {
            $('.ui.sidebar.menu').sidebar('toggle'); 
        }

        //File Modal
        $('#add_project_button').click(function() {
            $("#project_modal").modal({
                onApprove : function() {
                    var project_name = encodeURIComponent($("#project_name").val())
                    window.location.replace("/add-project/" + project_name)
                }
            })
            .modal('show')
        });
    </script>
</body>
