{% extends "bootstrap/base.html" %}
{% block title %}Read TI Later{% endblock %}

{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
{% endblock %}

{% block navbar %}
<div id="navbar" class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
    <div class="navbar-brand">Read TI Later</div>
    <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">
                <a class="nav-link" href="{{ url_for('index') }}">My List</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ url_for('archived') }}">Archived</a>
            </li>
        </ul>
        <form class="form-inline ml-auto">
            <a class="btn btn-primary" href="/logout" role="button">Logout</a>
        </form>
    </div>        
</div>
{% endblock %}

{% block content %}
<div class="wrapper">
    <!-- Sidebar -->
    <div id="sidebar">
        <ul class="list-unstyled components">
            {% if request.path == url_for('index') %}
                <li class="nav-item active">
            {% else %}
                <li class="nav-item">
            {% endif %}
                <a href="{{ url_for('index') }}">
                <svg
                    width="24"
                    height="24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    style="height: 1rem; vertical-align: middle; margin-bottom: 4px;">
                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#home"/>
                </svg>My List
                </a>
            </li>
            {% if request.path == url_for('archived') %}
                <li class="nav-item active">
            {% else %}
                <li class="nav-item">
            {% endif %}
                <a href="{{ url_for('archived') }}"><svg
                    width="24"
                    height="24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    style="height: 1rem; vertical-align: middle; margin-bottom: 4px;">
                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#archive"/>
                </svg>Archived</a>
            </li>
        </ul>
    </div>

    <!-- Page Content -->
    <div id="content">
        <div id="error-alert" class="alert alert-danger" role="alert" style="display: none;">
            This is a danger alert—check it out!
        </div>
        <form>
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <label for="formGroupExampleInput4">URL</label>
                    <input id="link-form" type="text" class="form-control" placeholder="https://example.com">
                    <br>
                    <button type="button" class="btn btn-primary" onclick="addUrl();">Add</button>
                    <br>
                    <br>
                </div>
                <div style="position:fixed; bottom: 20px;">
                    <p style="text-align: center;">Would you rather save on the go? Try our bookmarklet!</p>
                    <code>
                        javascript:(function(){var%20url%20=%20location.href;var%20otherWindow=window.open('about:blank','_blank');otherWindow.opener=null;otherWindow.location='{{ request.url_root }}add?close=1&url='+encodeURIComponent(url);})();
                    </code>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
function addUrl() {
    url = $('#link-form').val();

    if (url.trim().length === 0) {
        showError('URL is required');
        return false;
    }

    $.ajax({
        url: '/add',
        method: 'POST',
        data: { "url": url },
        success: function(data) {
            if (data !== 'Error')
                window.location.reload();
            else
                showError('URL cannot be empty');
        }
    });
}

function showError(error) {
    hideSuccess();
    $('#error-alert').text(error);
    $('#error-alert').show();
}

function showArticle(message) {
    hideError();
    $('#article').html(message);
    $('#article img').css('max-width', '100%')
    $('#article').show();
}

function hideError(error) {
    $('#error-alert').hide();
}

function hideArticle(error) {
    $('#article').hide();
}
</script>
{% endblock %}