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

{% block metas %}
{{super()}}
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link rel="manifest" crossorigin="use-credentials" href="./manifest.json">
<link rel="apple-touch-icon" href="{{url_for('.static', filename='read-it-later.png')}}">
{% endblock %}

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

{% block navbar %}
<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
    {% if article[5] == 1 %}
    <a href="{{url_for('archived')}}"><div class="navbar-brand"><svg
    {% else %}
    <a href="{{url_for('index')}}"><div class="navbar-brand"><svg
    {% endif %}
                    width="24"
                    height="24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#arrow-left"/>
                </svg></div></a>
    <form class="form-inline ml-auto">
        {# <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="darkSwitch" />
            <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
        </div>
        <div class="navbar-text" style="margin-right: 20px; ">{{ user['userName'] }}</div> #}
        <div class="toolbar-button"><svg
                    width="24"
                    height="24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#type"/>
                </svg><svg
                    width="16"
                    height="16"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#chevron-down"/>
                </svg></div>
        {% if article[5] == 1 %}
        <a class="toolbar-button" href="/unarchive/{{ article[0] }}" data-toggle="tooltip" data-placement="bottom" title="Unarchive"><svg
        {% else %}
        <a class="toolbar-button" href="/archive/{{ article[0] }}" data-toggle="tooltip" data-placement="bottom" title="Archive"><svg
        {% endif %}
                    width="24"
                    height="24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
                    {% if article[5] == 1 %}
                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#plus-square"/>
                    {% else %}
                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#archive"/>
                    {% endif %}
                </svg></a>
        <a class="toolbar-button" href="/delete/{{ article[0] }}" style="padding-right: 1rem;" data-toggle="tooltip" data-placement="bottom" title="Trash"><svg
                    width="24"
                    height="24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#trash"/>
                </svg></a>
    </form>
</nav>
{% endblock %}

{% block content %}
<div class="container wrapper" style="padding-left: 15px !important; padding-right: 15px !important; margin-right: auto !important; margin-left: auto !important; left: 0; right: 0;">
    <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-6">
                <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 class="col-lg-12">
                <div style="padding: 10px;" id="article">
                    <h1 style="text-align: center;">{{ article[3] }}</h1>
                    <a href="{{ article[1] }}" class="text-info" target="_blank" style="display: block; text-align: center; margin-bottom: 20px;">View Original</a>
                    {{ article[2] | safe}}
                </div>
            </div>
        </div>
    </form>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
$('#article img').css('max-width', '100%');
$('#article img').css('height', 'auto');

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>
{% endblock %}