{% extends 'main_base.html' %}

{% block extra_head %}
  <link rel="stylesheet" href="/static/css/files/publish.css" />
  <style type="text/css">
.templateArticle {
  cursor: pointer;
  font-family: sans-serif;

  color: #393939;
}

.linkContainer {
  margin-bottom: 6px;
  margin-left: 12px;
}

.seeLink {
  font-size: 0.8em;
  font-style: italic;
}

.templateArticle:hover {
  color: #000;
}

  </style>

  <script type="text/javascript">

$(function() {
  $('.templateArticle').click(function() {
    var id = $(this).attr("data-id");
    $('#articleId').val(id);
    if ($("#articleName").val().replace(" ", "") === '') {
      alert("please enter a name for your article.");
    } else {
      $('#templateArticles').fadeOut("fast");
      $('#newArticleForm').submit();
    }
  });
});

  </script>
{% endblock %}

{% block content %}
    <div id="publishWrapper">
        <div id="publishBlockleft">
    
        <p>
Welcome to the publishing area of edgwareroad.org, and to our printing tool.
To use the tool, you have to be logged in. To test-run the tool, use the login:guest and password:guest.
        </p> <br/>
        <p>
Since the tool uses Html5 and features standard only in newer browsers, please note that the tool will only work in Firefox 3.5+, Google Chrome, and Safari. 
        </p><br/>
        <p>
If you are a participant looking to open a new account, please write to contact@edgwareroad.org.  A basic introduction to its features are found in our first publication, Instructions for Printing, here.
        </p>
    </div>


    <div id="formWrapper">
    <div id="articleInstructions">
      <b>Instructions:</b> Give your article a name and then click on a template (or other article) you would like to use as a starting point for your new article. Have fun!
    </div>
    <br /><br />
    <form id="newArticleForm" action="" method="POST">
      <label for="article_name">Article Name:</label> <input type="text" id="articleName" name="article_name" /> <br />
      <input type="hidden" id="articleId" name="article_id" />
    </form>
    <div id="templateArticles">
      <h3>Templates:</h3>
      {% for t in templates %}
        <div class="linkContainer">
          <span class="templateArticle" data-id="{{ t.id }}">{{ t.name }}</span> 
          <span class="seeLink">[<a href="article_web/{{ t.id }}/" title="See Article" target="_blank">see</a>]</span>
        </div>
      {% endfor %}
      <h3>Other Articles:</h3>
      {% for o in others %}
        <div class="linkContainer">
          <span class="templateArticle" data-id="{{ o.id }}">{{ o.name }}</span> 
          <span class="seeLink">[<a href="article_web/{{ o.id }}/" title="See Article" target="_blank">see</a>]</span>
        </div>
      {% endfor %}
    </div>
  </div>
{% endblock %}