{% 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 %}
    {% include "fragments/navbar.j2" %}
{% endblock %}

{% block content %}
<div class="wrapper">
    <!-- Sidebar -->
    <div id="sidebar">
        {% include "fragments/sidebar.j2" %}
    </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[3] }}</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>

{% include "fragments/add_modal.j2" %}
{% endblock %}

{% block scripts %}
{{ super() }}
<script type="text/javascript" src="{{url_for('.static', filename='add_modal.js')}}"></script>
{% endblock %}