<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to cat</title>
    <script src="https://cdn.jsdelivr.net/npm/vega@4.4.0"></script>
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        <a class="navbar-item">
            <img src="/img/cat_hollow_purple.png" width="28" height="28">
        </a>

        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
           data-target="navbarBasicExample">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>

    <div id="navbarBasicExample" class="navbar-menu">

        <div class="navbar-start">
            <div class="navbar-item">
                {% if user %}
                Hello {{ user.name }}
                {% else %}
                Please login to use the graph
                {% endif %}
            </div>

            <!--
            <a class="navbar-item">
                Documentation
            </a>

            <div class="navbar-item has-dropdown is-hoverable">
                <a class="navbar-link">
                    More
                </a>

                <div class="navbar-dropdown">
                    <a class="navbar-item">
                        About
                    </a>
                    <a class="navbar-item">
                        Jobs
                    </a>
                    <a class="navbar-item">
                        Contact
                    </a>
                    <hr class="navbar-divider">
                    <a class="navbar-item">
                        Report an issue
                    </a>
                </div>
            </div>
-->
        </div>
        <div class="navbar-end">
            <div class="navbar-item">
                <div class="buttons">
                    {% if user.admin %}
                    {% if user.admin.enabled %}
                    <a class="button is-light" href="/admin/disable">
                        <strong>Disable admin</strong>
                    </a>
                    {% else %}
                    <a class="button is-light" href="/admin/enable">
                        <strong>Enable admin</strong>
                    </a>
                    {%endif%}
                    {% endif %}

                    {% if user %}
                    <a class="button is-light" href="/logout">
                        <strong>Logout</strong>
                    </a>
                    {% else %}
                    <a class="button is-info" href="/oauth/oauth-init">
                        Log in
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</nav>
<section class="section">
    <div class="container">
        <div id="view">
            <div class="loader-container">
                <div class="loader"></div>
            </div>
        </div>
    </div>
</section>
{% if user %}
<section class="section">
    <div class="columns">
        <div class="column">
            <div class="card">
                <header class="card-header">
                    <p class="card-header-title">
                        Your cuddles
                    </p>
                </header>

                <div class="card-content">
                    <div class="content">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>Person 1</th>
                                <th>Person 2</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for relation in user-relations %}
                            <tr>
                                <td>{{relation.name}}</td>
                                <td>{{relation.name_2}}</td>
                            </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <div class="card">
                <header class="card-header">
                    <p class="card-header-title">
                        Outgoing requests
                    </p>
                </header>
                <div class="card-content">
                    <div class="content">
                        <form action="/request_relation" method="post">
                            {% csrf-field %}
                            <div class="field has-addons">
                                <div class="control">
                                    <div class="select">
                                        <select name="to_id" id="to_id">
                                            {% for user in other_users %}
                                            <option value="{{user.id}}">{{user.name}}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="control">
                                    <input class="button is-link" type="submit" value="Request cuddle!">
                                </div>
                            </div>
                        </form>
                        <br/>
                        <table class="table">
                            <thead>
                            <tr>
                                <th>Outgoing requests</th>
                                <th>Status</th>
                            </tr>
                            </thead>
                            {% for rr in rel-requests-out %}
                            <tr>
                                <td>{{rr.to_name}}
                                </td>
                                <td>
                                    {% include "parts/colored-status.html" %}
                                </td>
                            </tr>
                            {% endfor %}
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <div class="card">
                <header class="card-header">
                    <p class="card-header-title">
                        Incoming requests
                    </p>
                </header>
                <div class="card-content">
                    <div class="content">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>Incoming requests</th>
                                <th colspan="2">Status</th>
                            </tr>
                            </thead>
                            {% for rr in rel-requests-in %}
                            <tr>
                                <td>
                                    <span>{{rr.from_name}}</span>
                                </td>
                                <td {% ifunequal rr.status
                                "open" %}colspan='2'{% endifunequal %}>
                                {% include "parts/colored-status.html" %}
                                </td>
                                {% ifequal rr.status "open" %}
                                <td>
                                    <form action="/relation_request/{{rr.rr_id}}/status" method="post">
                                        {% csrf-field %}
                                        <div class="field has-addons is-right">
                                            <div class="control">
                                                <button type="submit" name="accept"
                                                        class="button is-success is-small is-rounded is-outlined">
                                                    Accept
                                                </button>
                                            </div>
                                            <div class="control">
                                                <button type="submit" name="decline"
                                                        class="button is-danger is-small is-rounded is-outlined">
                                                    Decline
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </td>
                                {% endifequal %}
                            </tr>
                            {% endfor %}
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endif %}
{% if user.admin.enabled %}
<section class="section">
    <div class="columns">
        <div class="column">
            <h3 class="title is-3">Little humans</h3>
            <div>
                <h3 class="subtitle is-4">Add human</h3>
                <form action="/users" method="post">
                    {% csrf-field %}
                    <div class="field">
                        <label class="label" for="name">Name</label>
                        <div class="control">
                            <input class="input" type="text" name="name" id="name" placeholder="Foo bar">
                        </div>
                    </div>
                    <div class="field">
                        <label class="label" for="gender">Gender</label>
                        <div class="control">
                            <input class="input" type="text" name="gender" id="gender" placeholder="racetrack">

                        </div>
                    </div>
                    <div class="field">
                        <div class="control">
                            <input class="button is-link" type="submit" value="Add!">
                        </div>
                    </div>
                </form>
            </div>
            <table class="table">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Gender</th>
                </tr>
                </thead>
                <tbody>
                {% for user in users %}
                <tr>
                    <td>{{user.name}}</td>
                    <td>{{user.gender}}</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="column">
            <h3 class="title is-3">Cozy cuddles</h3>
            <div>
                <h3 class="subtitle is-4">Add cuddle</h3>
                <form action="/relations" method="post">
                    {% csrf-field %}
                    <div class="field">
                        <label for="from">Person from</label>
                        <div class="control">
                            <div class="select">
                                <select name="from_id" id="from">
                                    {% for user in users %}
                                    <option value="{{user.id}}">{{user.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="field has-addons">
                        <div class="control">
                            <div class="select">
                                <select name="to_id" id="to">
                                    {% for user in users %}
                                    <option value="{{user.id}}">{{user.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="control">
                            <input class="button is-link" type="submit" value="Add!">
                        </div>
                    </div>
                </form>
            </div>
            <table class="table">
                <thead>
                <tr>
                    <th>Person 1</th>
                    <th>Person 2</th>
                </tr>
                </thead>
                <tbody>
                {% for relation in relations %}
                <tr>
                    <td>{{relation.name}}</td>
                    <td>{{relation.name_2}}</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</section>
{% endif %}
<section class="section">
    <div id="app">
        <!--<div class="container">-->
            <!--<h4>Welcome to cat</h4>-->
            <!--<p>If you're seeing this message, that means you haven't yet compiled your ClojureScript!</p>-->
            <!--<p>Please run <code>lein figwheel</code> to start the ClojureScript compiler and reload the page.-->
            <!--</p>-->
            <!--<h4>For better ClojureScript development experience in Chrome follow these steps:</h4>-->
            <!--<ul>-->
                <!--<li>Open DevTools-->
                <!--<li>Go to Settings ("three dots" icon in the upper right corner of DevTools > Menu > Settings F1-->
                    <!--&gt;-->
                    <!--General > Console)-->
                <!--<li>Check-in "Enable custom formatters"-->
                <!--<li>Close DevTools-->
                <!--<li>Open DevTools-->
            <!--</ul>-->
            <!--<p>See <a href="http://www.luminusweb.net/docs/clojurescript.md">ClojureScript</a> documentation for-->
                <!--further details.</p>-->
        <!--</div>-->
    </div>
</section>
<footer class="footer">
    <div class="content has-text-centered">
        <div>Icons made by
            <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a
                    href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a
                    href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC
                3.0
                BY</a>
        </div>
    </div>
</footer>

<!-- scripts and styles -->
{% style "/assets/bulma/css/bulma.css" %}
{% style "/assets/font-awesome/css/all.css" %}
{% style "/css/screen.css" %}

{% script "/js/home.js" %}
{% script "/assets/font-awesome/js/all.js" %}

<script type="text/javascript">
    var csrfToken = "{{csrf-token}}";
</script>
{% script "/js/app.js" %} <!-- Compiled clojurescript -->

{% script "/js/graphing.js" %} <!-- Vega graphing -->
</body>
</html>
