{% extends "base.html" %}
{% load bt %}
{% load i18n %}
{% load comments %}
{% block styles %}
{% endblock %}
{% block scripts %}
<script type="text/javascript" src="{%media_url%}/js/jquery.1.4.2.min.js"></script>
<script type="text/javascript" src="{%media_url%}/js/tinymce/tiny_mce.js"></script>
<script type="text/javascript" charset="utf-8">
function bindPostCommentHandler() {
    $('.toggle').click(function(){
      $(this).hide();
      $(this).next().show();
    });
    $('#comment_form form input.submit-preview').remove();
    $('#comment_form form').submit(function() {
        var postdata=$('#comment_form form').serialize()+'&csrftoken={{csrf_token}}';
        $.ajax({
            type: "POST",
            data: postdata,
            url: "{% comment_form_target %}",
            cache: false,
            dataType: "html",
            success: function(html, textStatus) {
                $('#comment_form form').replaceWith(html+" "+"{% trans 'It will appear here after moderation.' %}");
                bindPostCommentHandler();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $('#comment_form form').replaceWith("{% trans 'Your comment was unable to be posted at this time. We apologise for the inconvenience.' %}");
            }
        });
        return false;
    });
}

$(document).ready(function() {
    bindPostCommentHandler();
  $('.confirm_form').submit(function() {
     var self=this;
     var email=$(this).children('input:first').attr('value');
     if( email.length>0) {
        $.ajax({url: '/confirm/'+$(this).attr('id')+'/'+email, success: function(data) { $(self).html(data); }});
     } else {
        console.log($(this).find('[type=submit]'));
        $(this).find('[type=text]').focus();
     }
     return false;
     });
   tinyMCE.init({
               mode : "textareas",
               width : "400",
               height : "300",
               theme : "advanced",
               theme_advanced_toolbar_align : "left",
               theme_advanced_toolbar_location : "top",
               //theme_advanced_buttons1 : "bold,italic,underline,bullist,numlist,outdent,indent,blockquote,undo,",
               theme_advanced_buttons1 : "",
               theme_advanced_buttons2 : "",
               theme_advanced_buttons3 : "",
               plugins : "paste",
               paste_auto_cleanup_on_paste : true,
               paste_strip_class_attributes: 'all',
               paste_remove_styles: true,
               //init_instance_callback: focushandlers,
               valid_elements : "@[id|title|dir<ltr?rtl|lang|xml::lang],a[rel|rev|"
                                + "charset|hreflang|name|href|title],strong/b,em/i,"
                                + "strike,u,p,-ol,-ul,-li,br,-sub,-sup,-blockquote,"
                                + ",-code,-pre,address,-h1,-h2,-h3,-h4,-h5,"
                                + "-h6,hr[size|noshade],dd,dl,dt,cite,abbr,acronym,"
                                + "del[datetime|cite],ins[datetime|cite]",
             });
});
</script>
{% endblock %}

{%block content%}
<div id='global'>
  <h2>{{v.operator}} ({{v.country}}) {{v.contract}}</h2>
<div id="report">
  <dl>{%if v.resource_name%}<dt>{% trans "Resource" %}</dt><dd>{{v.resource_name}}</dd>{%endif%}
  {%if v.type%}<dt>{% trans "Type" %}</dt><dd>{{v.type}}</dd>{%endif%}
  {%if v.media%}<dt>{% trans "Media" %}</dt><dd>{{v.media}}</dd>{%endif%}
  {%if v.temporary%}<dt>{% trans "Temporary restriction" %}</dt><dd>{{v.temporary}}</dd>{%endif%}
  {%if v.loophole%}<dt>{% trans "Loophole offering" %}</dt><dd>{% trans "yes" %}</dd>{%endif%}
  {%if v.contractual%}<dt>{% trans "Contractual restriction" %}</dt><dd>{% trans "yes" %}</dd>{%endif%}
  {%if v.contract_excerpt%}<dt>{% trans "Contract excerpt" %}</dt><dd class='text'>{{v.contract_excerpt|safe}}</dd>{%endif%}
  {%if v.comment_set.all%}</dl>
</div>

<div id="description" class='round-box'>
    <h3>{%trans "Description" %}</h3>
    {%for c in v.comment_set.all%}
    <div class="description-node">
      <div class="description">{{c.comment|safe}}</div>
      <span class="submitter">{%if c.submitter_name%}{{c.submitter_name}}{%else%}{{c.submitter_email}}{%endif%}</span> - <span class="comment_date">{{c.timestamp|date:"SHORT_DATE_FORMAT" }}</span>
      {%if c.attachment_set.all%}
      <div class="attachs">
         {% trans "Attachments" %}
        <ul>
          {%for a in c.attachment_set.all%}
          <li><a href="{%media_url%}/{{a.storage.url}}">{{a.name}}</a></li>
          {%endfor%}
        </ul>
      </div>
      {%endif%}
    </div>
    {%endfor%}
</div>


  <h3>{%trans "Confirm this restriction if you experience it as well" %}</h3>
  <div class="info-validate" style="display: inline-block;">
    <form method="get" id="{{ v.pk }}" class="confirm_form" >
        <label>{% trans "In order to <strong>confirm</strong> this report, please enter your email address" %}</label>
        <input type="text" name="email" />
        <input type="hidden" value="{{ v.pk }}" />
        <input type="submit" value="{% trans "confirm" %}" />
      </form>
   </div>
  {%endif%}
  {% if not key %}
  <div id="comments">
  <h3>{% trans "Comments" %}</h3>
  {% get_comment_list for v as cmt_list %}
  {% for comment in cmt_list %}
  <div class="comment">
     <p><a href="{{ comment.user_url }}">{{ comment.user_name }}</a> - {{ comment.submit_date }}</p>
     <p>{{ comment.comment }}</p>
  </div>
  {% endfor %}
  <div class="toggle button">{% trans "Add comment" %}</div>
  <div id="comment_form" style="display: none;">
    {% render_comment_form for v %}
  </div>
  {% else %}
  <br />
  <a class="button" href='/moderate/?key={{key}}&action=approve'>{% trans "Approve Submission" %}</a>
  <a class="button" href='/moderate/?key={{key}}&action=delete'>{% trans "Delete Submission" %}</a>
  </div>
  {% endif %}
</div>
{%endblock%}