{% extends "base.html" %}

{% block container %}
    <div id='container'> 
      <span id='logo'><a href="/">/edit</a></span> 
      <div id='primary'> 
        <h1><a href="/">&nbsp;&nbsp;&nbsp;&nbsp;by mcottondesign</a></h1>
          
        <div class='blog-content'> 
            {% if b.title %}
              <div class='posts'>
                  <h2>{{ b.title }}</h2>
                  <div style="top: -20px; position: relative; font-size: 12px;">
                    {{ b.date|date }} &nbsp;&nbsp;
                    <a href="/blog/{{ b.tag }}">{{ b.tag }}</a> 
                    || <a href="/post/{{ b.key }}">permalink</a>
                    {% if admin %}
                      || <a href="/edit/{{ b.key }}">edit</a>
                      || <a href="/delete/{{ b.key }}">remove</a>
                    {% endif %}
                  </div>
                  <div style="margin-top: -20px;">
                    {{ b.content|safe }}
                  </div>
              </div>
            {% endif %}
          
        <div class='posts'>
            {% if admin %}
            <script type="text/javascript" src="/js/showdown.js"></script>
            <script type="text/javascript"> 
              $(function() {
                var converter = new Showdown.converter();
                $("#user_input").keyup(function(event){
                  var txt = $("#user_input").val();
                  var html = converter.makeHtml(txt);
                  $(".wikistyle").val(html)
         
                });
              });
              
              $(document).ready(function() {
              	$('#html_preview').hide();
              	$('#show_html').click(function(event) {
                    event.preventDefault();	
                    $('#html_preview').toggle();
              	});
              });
            </script> 
            
             
            <br>
		    <form id="comment_form" action="/edit/{{ b.key }}" method="post"> 
				<h3>Post Something New</h3>
						<p><input id="title" name="title" placeholder="Title" type="text" size="23" value="{{ b.title }}"/></p>
						<p><input id="category" placeholder="Category" name="category" type="text"  size="23" value="{{ b.tag }}"/></p>
                      <div id="entry-container"> 
                        <p><textarea id="user_input" placeholder="Enter Markdown" name="user_input" rows="10" cols="30">
                        {{ b.markdown }}</textarea>
                        
                        <h6><a href="#" id="show_html">toggle html preview</a></h6>
                        
                        </p>
                      </div> 
                      <div id="html_preview">
				      <p><textarea id="textbody" placeholder="HTML Preview" name="html_body" rows="10" cols="30" class="wikistyle">
				      {{ b.content }}</textarea></p>
				      </div>
				    <br>
				      <!-- Add Comment Button -->
				      <input type="submit" class="" name="Publish" value="Publish">
			</form> 
			{% endif %}
			<br><br><br><br> <!-- this is so the blog post isn't behind the footer -->
            &nbsp; <!-- this is to make sure the div always has something in it -->
          </div>
        </div> 
      </div> 
    </div>
{% endblock %}

{% block footer %} 
      <div id='footer'>  
        <span>
            <a href="/">home</a> <b>||</b>
            <a href="/blog">blog</a> <b>||</b>
            <a href="/blog/contact">contact</a> <b>||</b>
            <a href="{{ admin_url }}">{{ admin_url_text }}</a> 
        </span> 
      </div>  
{% endblock %}