{% extends 'djaken/base.html' %}
{% load i18n static %}

{% block extrastyle %}
{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static "djaken/css/edit_note.css" %}" />
<meta charset=utf-8 />
{% endblock %}

{% block title %}{{note.title}} | {{ site_title|default:_('Djaken') }}{% endblock %}

{% block content %}
    <div class="controls">
        <table class="outer">
            <tr>
                <td>
                    <table class="inner">
                        <tr>
                            <td class="control_button">
                                <a class="save_and_view_button" title="{% trans 'Save and view note' %}" onclick="return viewAfterSave()"></a>
                            </td>
                            <td class="control_button">
                                <a class="save_button" title="{% trans 'Save note' %}" onclick="return continueAfterSave()"></a>
                            </td>
                            <td class="control_button">
                                <a class="view_button" title="{% trans 'View note' %}" href="{% url 'djaken:view_note' note.pk %}"></a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <div class="note_content">
        <form action="{% url 'djaken:save_note' note.pk %}" method="post">
            {% csrf_token %}
            <br>
            <label for="note_title">{% trans 'Title' %}</label>
            <br>
            <input type="text" name="note_title" id="note_title" value="{{ note.title }}" maxlength="255" />
            <br>
            <br>
            <label for="note_content">{% trans 'Content' %}</label>
            <br>
            <textarea name="note_content" id="note_content">{{ note_content }}</textarea>
            <br>
            <br>
            <hr>
            <br>
            <label for="image_attach_selector">{% trans 'Attach Image' %}</label>
            <br>
            <table class="image_attach"><tr>
            <td><div class="image_attach_selector">
            <input type="file" name="image_attach_selector" id="image_attach_selector" title="{% trans 'Select image' %}" accept="image/gif, image/jpeg, image/png" onchange="readURL(this)"/>
            </div></td>
            <td><a class="save_button" id="image_attach_save" title="{% trans 'Save selected image' %}" style="display: none" onclick="return imageAttachSave()"></a></td>
            <td><a class="erase_button" id="image_attach_clear" title="{% trans 'Clear selected image' %}" style="display: none" onclick="return clearImageAttach()"></a></td>
            </tr></table>
            <br>
            <label for="image_preview">{% trans 'Image Preview' %}</label>
            <br>
            <img id="image_preview" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAIAAAABc2X6AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAqElEQVR4nO3csQ3AIAwAQRMxGINQMhqDMFpmcKrw/quDpRcVspS21opKekTMOVNnzjmp78cYP5m/935SowEMpjOYzmA6g+kMpjOYzmC6Hje/bz/ML3fDBtMZTGcwncF0BtMZTGcwXY/L37ep+e6HCzCYzmA6g+kMpjOYzmC6csHuh+kMpjOYzmA6g+kMpjOYzmA698N0BtMZTGcwncF0BtMZTNeq/V7qBQTYLdl+Vm1PAAAAAElFTkSuQmCC" alt="{% trans 'Attached Image' %}" />
            <br>
            <hr>
            <br>
            <label for="is_encrypted"> {% trans 'Encrypted' %} </label>
            <input type="checkbox" name="is_encrypted" id="is_encrypted" value="is_encrypted" {% if note.is_encrypted %} checked {% endif %} onclick="is_encryptedClicked()" />
            <input type="password" name="encrypt_pass" id="encrypt_pass" value="" {% if note.is_encrypted %} required {% endif %} />
            <br>
            <br>
            <hr>
            <input type="hidden" name="preview_image_data" id="preview_image_data" value="" />
            <input type="hidden" name="continue_after_save" id="continue_after_save" value="False" />
            <input type="hidden" name="attach_during_save" id="attach_during_save" value="False" />
            <input type="submit" id="save_form" value="{% trans 'Save & View' %}" />
            <br>
        </form>
    </div>
    <div class="controls">
        <table class="outer">
            <tr>
                <td>
                    <table class="inner">
                        <tr>
                            <td class="control_button">
                                <a class="save_and_view_button" title="{% trans 'Save and view note' %}" onclick="return viewAfterSave()"></a>
                            </td>
                            <td class="control_button">
                                <a class="save_button" title="{% trans 'Save note' %}" onclick="return continueAfterSave()"></a>
                            </td>
                            <td class="control_button">
                                <a class="view_button" title="{% trans 'View note' %}" href="{% url 'djaken:view_note' note.pk %}"></a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <br>
    <br>
    <div class="footer">
        {% if note.is_encrypted %}
            <p class="encryption_icon"></p>
        {% endif %}
        {% if note.relevant %}
            <p class="note_relevant">
                {% trans 'Relevant' %}
            </p>
        {% endif %}
        {% if not note.relevant %}
            <p class="note_not_relevant">
                {% trans 'Not Relevant' %}
            </p>
        {% endif %}
        <p>
            {% trans 'Modified on' %}
            <time datetime="{{note.modified|date:"c"}}">
                {{note.modified|date}}
            </time>
        </p>
        <p>
            {% trans 'Created on' %}
            <time datetime="{{note.created|date:"c"}}">
                {{note.created|date}}
            </time>
        </p>
    </div>
    <script = "text/javascript">
        window.onload = function() {
            history.replaceState("", "", "/edit_note/{{note.id}}");
        }
        function toggleImageAttachSaveButton() {
            var btn = document.getElementById("image_attach_save");
            if (btn.style.display === "none")
            {
                btn.style.display = "block";
            }
            else
            {
                btn.style.display = "none";
            }
        }
        function toggleImageAttachClearButton() {
            var btn = document.getElementById("image_attach_clear");
            var imageAttachSelector = document.getElementById("image_attach_selector");
            var imageAttachSelectorDiv = document.getElementsByClassName("image_attach_selector");
            if (btn.style.display === "none")
            {
                btn.style.display = "block";
                imageAttachSelector.setAttribute('disabled', 'disabled');
                imageAttachSelectorDiv[0].style.opacity = "0.3";
            }
            else
            {
                btn.style.display = "none";
                imageAttachSelector.removeAttribute('disabled');
                imageAttachSelectorDiv[0].style.opacity = "1.0";
                imageAttachSelector.value = "";
            }
        }
        function clearImageAttach() {
            document.getElementById("image_preview").src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAIAAAABc2X6AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAqElEQVR4nO3csQ3AIAwAQRMxGINQMhqDMFpmcKrw/quDpRcVspS21opKekTMOVNnzjmp78cYP5m/935SowEMpjOYzmA6g+kMpjOYzmC6Hje/bz/ML3fDBtMZTGcwncF0BtMZTGcwXY/L37ep+e6HCzCYzmA6g+kMpjOYzmC6csHuh+kMpjOYzmA6g+kMpjOYzmA698N0BtMZTGcwncF0BtMZTNeq/V7qBQTYLdl+Vm1PAAAAAElFTkSuQmCC";
            document.getElementById("preview_image_data").value = "";
            toggleImageAttachSaveButton();
            toggleImageAttachClearButton();
        }
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    var image_data = e.target.result
                    document.getElementById("image_preview").src = image_data
                    document.getElementById("preview_image_data").value = image_data
                };
                reader.readAsDataURL(input.files[0]);
                toggleImageAttachSaveButton();
                toggleImageAttachClearButton();
            }
        }
        function viewAfterSave() {
            document.getElementById("continue_after_save").value = "False";
            document.getElementById("save_form").click();
        }
        function continueAfterSave() {
            document.getElementById("continue_after_save").value = "True";
            document.getElementById("save_form").click();
        }
        function imageAttachSave() {
            document.getElementById("continue_after_save").value = "True";
            document.getElementById("attach_during_save").value = "True";
            document.getElementById("save_form").click();
        }
        function is_encryptedClicked() {
            if (document.getElementById('is_encrypted').checked)
            {
                document.getElementById('encrypt_pass').required = true;
            }
            else
            {
                document.getElementById('encrypt_pass').required = false;
            }
        }
    </script>
{% endblock %}
