{% extends "base.html" %}
{% block title %}{{ action }}{% endblock %}
{% block pageheader %}{{ action }}{% endblock %}
{% block pagecontent %}

{% if bookmark.http_status != 200 and bookmark.http_status != 202 and bookmark.http_status != 304 %}
<div class="row">
    <div class="col s12">
        <div class="card-panel {{ theme.ERRORMESSAGE_BACKGROUND }}">
            <span class="{{ theme.ERRORMESSAGE_TEXT }}">
                {% if bookmark.http_status == 404 %}
                <i class="material-icons">report_problem</i>&nbsp;&nbsp;URL not found (404), broken/outdated link?
                {% elif bookmark.http_status == 301 %}
                <i class="material-icons">report_problem</i>&nbsp;&nbsp;HTTP status (301), moved permanently. Use button for new target
                {% elif bookmark.http_status == 302 %}
                <i class="material-icons">report_problem</i>&nbsp;&nbsp;HTTP status (302), moved temporarily. Use button for new target
                {% elif bookmark.http_status == bookmark.HTTP_CONNECTIONERROR %}
                <i class="material-icons">report_problem</i>&nbsp;&nbsp;Connection error, server might have been offline at the time of last edit
                {% else %}
                <i class="material-icons">report_problem</i>&nbsp;&nbsp;HTTP status {{ bookmark.http_status }}
                {% endif %}
            </span>
        </div>
    </div>
    </div>
{% endif %}

{% if message %}
<div class="row">
    <div class="col s12">
        <div class="card-panel {{ theme.MESSAGE_BACKGROUND }}">
            <span class="{{ theme.MESSAGE_TEXT }}">
                {{ message }}
            </span>
        </div>
    </div>
</div>
{% endif %}

{% if formaction and formaction == 'edit' %}
<form class="digimark" id="digimark" action="{{ url_for('editingbookmark', userkey=userkey, urlhash=bookmark.url_hash) }}" method="POST" onsubmit="return onSubmitForm();" autocomplete="off">
{% else %}
<form class="digimark" id="digimark" action="{{ url_for('addingbookmark', userkey=userkey) }}" method="POST" onsubmit="return onSubmitForm();" autocomplete="off">
{% endif %}

    <div class="row">
        <div class="input-field col s12">
            <i class="material-icons prefix">description</i>
            <input placeholder="title (leave empty for autofetch)" type="text" name="title" id="title" value="{{ bookmark.title }}" autocomplete="false" />
            <label for="title">Title</label>
{#            <span class="helper-text">Leave title empty for autofetching from the page</span>#}
        </div>

        <div class="input-field col s12">
            <i class="material-icons prefix">turned_in</i>
            <input placeholder="url" type="text" name="url" id="url" value="{{ bookmark.url }}" autocomplete="false" />
            <label for="url">URL</label>
            {% if bookmark.get_redirect_uri() %}
            <div>
                <a class="waves-effect waves-light btn" id="btn_urlupdate" onclick="updateURL()"><i class="material-icons left">turned_in</i>{{ bookmark.get_redirect_uri() }}</a>
            </div>
            <script type="text/javascript">
            function updateURL() {
                var text = document.getElementById('url');
                text.value = '{{ bookmark.get_redirect_uri() }}';
            }
            </script>
            {% endif %}
        </div>

        <div class="input-field col s12">
            <i class="material-icons prefix">comment</i>
            <input placeholder="note" type="text" name="note" id="note" value="{{ bookmark.note }}" autocomplete="false" />
            <label for="note">Note</label>
        </div>

        <div class="input-field col s12">
            <i class="material-icons prefix">label</i>
            <input placeholder="tags, divided by comma's" type="text" name="tags" id="tags" value="{{ bookmark.tags }}" autocomplete="false" />
            <label for="tags">Tags</label>
        </div>
    </div>
    {% if tags %}
    <div class="row">
        <div class="col s12">
            <ul class="collapsible" data-collapsible="expandable">
                <li>
                  <div class="collapsible-header"><i class="material-icons">label</i>Existing tags</div>
                  <div class="collapsible-body" style="padding: 10px;">
                    {% for tag in tags %}
                    <div class="chip clickable" id="chip_{{ tag }}" onclick="addTag('{{ tag }}');">
                        {{ tag }}
                    </div>
                    {% endfor %}
                  </div>
                </li>
            </ul>
        </div>
    </div>
    {% endif %}
    <div class="row">

        <div class="col s12">
            {#<i class="material-icons prefix">star</i>#}
            <label>
                <input type="checkbox" name="starred" id="starred" {% if bookmark.starred == True %}checked{% endif %} />
                <span>Starred</span>
            </label>
        </div>

        <div class="col s12">
            <label>
                <input type="checkbox" name="strip" id="strip" />
                <span>Strip parameters from url (like <em>?utm_source=social</em> - can break the link!)</span>
            </label>
        </div>

    {% if bookmark.url_hash %}
    </div>
    <div class="row">
        <div class="col l4 m6 s12">
            <table>
                <tr>
                    <th>Added</th>
                    <td>{{ bookmark.created_date.strftime('%Y-%m-%d %H:%M') }}</td>
                </tr>
                {% if bookmark.modified_date %}
                <tr>
                    <th>Modified</th>
                    <td>{{ bookmark.modified_date.strftime('%Y-%m-%d %H:%M') }}</td>
                </tr>
                {% endif %}
                {% if bookmark.deleted_date %}
                <tr>
                    <th>Deleted</th>
                    <td>{{ bookmark.deleted_date.strftime('%Y-%m-%d %H:%M') }}</td>
                </tr>
                {% endif %}
            </table>
        </div>
    </div>
    <div class="row">
    {% endif %}

        <div class="input-field col l2 m3 s4">
            <p class="left-align"><button class="btn waves-effect waves-light" type="submit" name="submit" id="submit">Save <i class="material-icons right">send</i></button></p>
        </div>
    {% if bookmark.url_hash %}
</form>
        <div class="input-field col l4 m4 s6">
        <form action="{{ url_for('deletingbookmark', userkey=userkey, urlhash=bookmark.url_hash) }}" method="POST">
            <p class="left-align"><button class="btn waves-effect waves-light deletebtn" type="submit" name="delete">Delete <i class="material-icons right">delete</i></button></p>
        </form>
        </div>
    </div>
    {% else %}
    </div>
</form>
    {% endif %}

<script>
function onSubmitForm()
{
    var theForm = document.getElementById('digimark');
    var submitButton = document.getElementById('submit');
    theForm.onsubmit = submitButton.setAttribute("disabled", true);
    return true;
}
function addTag(tagText)
{
    var text = document.getElementById('tags');
    text.value = text.value + ', ' + tagText;
}
</script>
{% endblock %}