{% extends "base_user.html" %}

{% block content %}
<div class="note">
  {% if note != None %}
  <div id="title" class="title" ondblclick="edit_note();">{{ note.title }}</div>
  {% if note.category != None %}
  <div class="category">{{ note.category.name }}</div>
  {% endif %}
  <div id="transformed_content">{{ note.transformed_text|safe }}</div>
  <div class="edit_button"><input id="edit_button" type="button" value="Edit" onclick="edit_note();"/> <form id="form_delete" action="/note/{{ note.id }}" method="post">{% csrf_token %}<input type="submit" name="delete" value="Delete" onclick="return confirm('Do you really want to delete this note ?')"/></form></div>
  <div id="div_edit">
    <form id="form_edit" action="/note/{{ note.id }}" method="post">{% csrf_token %}
      {{ note_form.as_p }}
      Category <input name="category" list="all_categories" {% if note.category != None %} value="{{ note.category.name }}" {% endif %}>
      <datalist id="all_categories">
	{% for category in categories %}
	<option value="{{ category.name }}"></option>
	{% endfor %}
      </datalist><br/>
      <input type="submit" name="edit" value="Edit" />
      <input type="button" value="Cancel" onclick="cancel_edit_note();"/>
    </form>
    <b>Markdown syntax</b><br /><br />
    <table>
      <tr>
	<td class="markdown_help">
	  <pre style="display:inline">_italic_</pre> <span style="font-style:italic">italic</span><br/>
	  <pre style="display:inline">**bold**</pre> <span style="font-weight:bold">bold</span><br/>
	  <pre style="display:inline">~~line through~~</pre> <span style="text-decoration:line-through">line through</span><br/>
	  <pre style="display:inline">~underline~</pre> <span style="text-decoration:underline">underline</span><br/>
	  <pre style="display:inline">>Citation</pre><br/>
	  <pre>
	    * Unordered list
	    * Second element
	  </pre>
	  <ul>
	    <li>Unordered list
	    <li>Second element
	  </ul>
	  <pre>
	    1. Ordered list
	    1. Second element
	  </pre>
	  <ol>
	    <li>Ordered list
	    <li>Second element
	  </ol>
	  <pre style="display:inline">![Picture](https://bits.wikimedia.org/images/wikimedia-button.png)</pre><img src="https://bits.wikimedia.org/images/wikimedia-button.png" alt="Picture"/><br/>
	  <pre style="display:inline">#[Inline Picture](https://bits.wikimedia.org/images/wikimedia-button.png)</pre><img src="https://bits.wikimedia.org/images/wikimedia-button.png" alt="Picture"/><br/>
	  <pre style="display:inline">[Link](http://www.wikipedia.org)</pre> <a href="http://www.wikipedia.org">Link</a><br/><br/>
	  <pre>
	    Code : 4 whitespaces ahead
	  </pre>
	</td>
	<td>
	  <pre># Title # or
	    Title
	    =====</pre>
	  <h1>Title</h1>
	  <pre>## Sub title ## or
	    Sub title
	    ---------</pre>
	  <h2>Sub title</h2>
	  <pre>### Sub sub title ###</pre>
	  <h3>Sub sub title</h3>
	</td>
      </tr>
    </table>
  </div>
  {% else %}
  <div class="form_add">
    <form action="/note/add" method="post">{% csrf_token %}
      {{ note_form.as_p }}
      Category <input name="category" list=all_categories>
      <datalist id="all_categories">
	{% for category in categories %}
	<option value="{{ category.name }}"></option>
	{% endfor %}
      </datalist><br/>
      <input type="submit" name="add" value="Add" />
      <input type="submit" name="cancel" value="Cancel" />
    </form>
  </div>
  <b>Markdown syntax</b><br /><br />
  <table>
    <tr>
      <td class="markdown_help">
	<pre style="display:inline">_italic_</pre> <span style="font-style:italic">italic</span><br/>
	<pre style="display:inline">**bold**</pre> <span style="font-weight:bold">bold</span><br/>
	<pre style="display:inline">~~line through~~</pre> <span style="text-decoration:line-through">line through</span><br/>
	<pre style="display:inline">~underline~</pre> <span style="text-decoration:underline">underline</span><br/>
	<pre style="display:inline">>Citation</pre><br/>
	<pre>
	  * Unordered list
	  * Second element
	</pre>
	<ul>
	  <li>Unordered list
	  <li>Second element
	</ul>
	<pre>
	  1. Ordered list
	  1. Second element
	</pre>
	<ol>
	  <li>Ordered list
	  <li>Second element
	</ol>
	<pre style="display:inline">![Picture](https://bits.wikimedia.org/images/wikimedia-button.png)</pre><img src="https://bits.wikimedia.org/images/wikimedia-button.png" alt="Picture"/><br/>
	<pre style="display:inline">#[Inline Picture](https://bits.wikimedia.org/images/wikimedia-button.png)</pre><img src="https://bits.wikimedia.org/images/wikimedia-button.png" alt="Picture"/><br/>
	<pre style="display:inline">[Link](http://www.wikipedia.org)</pre> <a href="http://www.wikipedia.org">Link</a><br/><br/>
	<pre>
	  Code : 4 whitespaces ahead OR
	  ```language
	  Code
	  ```
	</pre>
      </td>
      <td>
	<pre># Title # or
	  Title
	  =====</pre>
	<h1>Title</h1>
	<pre>## Sub title ## or
	  Sub title
	  ---------</pre>
	<h2>Sub title</h2>
	<pre>### Sub sub title ###</pre>
	<h3>Sub sub title</h3>
      </td>
    </tr>
  </table>
  {% endif %}
</div>
{% endblock %}