{% 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">
            {% if request.path == url_for('index') %}
                <li class="nav-item active">
            {% else %}
                <li class="nav-item">
            {% endif %}
                <a class="nav-link" href="{{ url_for('index') }}">My List</a>
            </li>
            {% if request.path == url_for('archived') %}
                <li class="nav-item active">
            {% else %}
                <li class="nav-item">
            {% endif %}
                <a class="nav-link" href="{{ url_for('archived') }}">Archived</a>
            </li>
        </ul>
        <form class="form-inline ml-auto">
            <a class="btn btn-primary" href="/save" role="button" style="margin-right: 20px;">Save</a>
            <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') }}"><i data-feather="home" style="height: 1rem; vertical-align: middle; margin-bottom: 4px;"></i>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') }}"><i data-feather="archive" style="height: 1rem; vertical-align: middle; margin-bottom: 4px;"></i>Archived</a>
            </li>
        </ul>
    </div>

    <!-- Page Content -->
    <div id="content">
        <form>
            <div class="row justify-content-center">
                <div class="col-lg-12">
                    {% for article in articles|reverse %}
                        <div style="color: black; padding: 10px; margin-bottom: 10px" class="card" id="article">
                            <a href="/article/{{article[0]}}">{{ article[2] }}</a>
                            <a href="{{ article[1] }}" target="_blank" style="color: darkgray">{{ article[4] }}</a>
                            <br>
                            <span>
                            <a href="/archive/{{article[0]}}" class='text-success'>Archive</a>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="/delete/{{article[0]}}" class='text-danger'>Delete</a>
                            </span>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="https://unpkg.com/feather-icons"></script>
<script>
feather.replace();
</script>
{% endblock %}