{% load macros render_nested %}

<section
    id="{{full_id}}"
    class="reg-section"
    data-page-type="preamble-section"
    data-doc-id="{{doc_number}}"
    data-label="{{section_label}}">
  <div id="preamble-read">
    <div class="preamble-content">
      {% if type == "preamble" %}
      <ul>
        {% render_nested template=sub_template context=sub_context %}
      </ul>
      {% else %}
        {% render_nested template=sub_template context=sub_context %}
      {% endif %}
    </div>

    {% include "regulations/footnotes.html" with footnotes=sub_context.node.footnotes only %}
    {% include "regulations/navigation.html" %}
  </div>

  <div id="preamble-write">
    {% if meta.comment_state.name == 'NO_COMMENT' %}
      {% block no-comment-warning %}
        <div class="comment-wrapper">
          <div class="write-warning">
            <div class="fa fa-3x fa-info-circle"></div>
            <h3>This notice does not accept comments</h3>
          </div>
          <div>
            <a href="{{request.path}}">
              <span class="cf-icon cf-icon-left"></span>
              <span class="back-to-proposal">Back to read the proposal</span>
            </a>
          </div>
        </div>
      {% endblock %}
    {% elif meta.comment_state.name == 'PREPUB' %}
      {% block prepub-warning %}
        <div class="comment-wrapper">
          <div class="write-warning">
            <div class="fa fa-3x fa-info-circle"></div>
            <h3>Comment period is not open</h3>
            <p>The comment period will open once the rule is officially
            published in the Federal Register</p>
          </div>
          <div>
            <a href="{{request.path}}">
              <span class="cf-icon cf-icon-left"></span>
              <span class="back-to-proposal">Back to read the proposal</span>
            </a>
          </div>
        </div>
      {% endblock %}
    {% elif meta.comment_state.name == 'OPEN' %}
      <div class="comment-wrapper">
        <div class="comment">
          <h4 class="comment-header comment-header-write">
            You are writing about
            <span class="comment-header-link"></span>
          </h4>

          <div class="comment-context-wrapper">

            <a class="comment-context-toggle" href="#">
              <span class="comment-context-text">
                <span class="fa fa-plus-circle" aria-hidden="true"></span>
                <span class="fa fa-minus-circle" aria-hidden="true"></span>
                <span class="comment-context-text-show">Show:</span>
                <span class="comment-context-text-hide">Hide:</span>
              </span>
              <span class="comment-context-label">
                <span class="comment-context-type">
                {% if type == "cfr" %}
                  {{ type|upper }}
                {% else %}
                  {{ type|capfirst }}
                {% endif %}
                </span>
                &nbsp;|&nbsp;
                <span class="comment-context-section"></span>
              </span>
            </a>

            <div class="comment-context"></div>

          </div>

          <h4 class="comment-header comment-header-response">
            Write your response to
            <span class="comment-header-link"></span>
          </h4>

          <form>
            <div class="editor-container"></div>
            <div class="comment-controls group">
              <div class="comment-attachments-wrapper">
                <div class="comment-attachments"></div>
                <label for="upload-attachment" class="comment-upload-button file-upload">
                  Upload Attachment<input type="file" id="upload-attachment" multiple/>
                </label>
                <div class="comment-attachment-count"></div>
                <div class="comment-attachment-limit"></div>
              </div>
              <button class="comment-button comment-submission" type="submit">Save Response</button>
              <a class="comment-delete-response" data-section="" href="#">
                <span class="fa fa-trash" aria-hidden="true"></span>
                Delete response
              </a>
              <div class="status"></div>
            </div>
          </form>
        </div>
      </div>
      <div class="comment-index">
        <ul class="comment-index-items"></ul>
        <a href="{% url 'comment_review' doc_number=doc_number %}" class="comment-index-review">Review and Submit</a>
      </div>
    {% elif meta.comment_state.name == 'CLOSED' %}
      {% block closed-warning %}
        <div class="comment-wrapper">
          <div class="write-warning">
            <div class="fa fa-3x fa-info-circle"></div>
            <h3>Comment period closed</h3>
            <p>As of <strong>{{meta.comments_close|date:"F j, Y"}} at
            11:59pm EST</strong>, we are no longer accepting comments on
            this rule.</p>
          </div>
          <div class="warning-explanation">
            {% with url="https://www.regulations.gov/#!documentDetail;D="|add:meta.primary_docket %}
            {% with text="Visit the docket ("|add:meta.primary_docket|add:")" %}
              {% external_link url=url text=text %}
            {% endwith %}{% endwith %}
            to view all the public comments on this rule: {{meta.title}}.
          </div>
          <div>
            <a href="{{request.path}}">
              <span class="cf-icon cf-icon-left"></span>
              <span class="back-to-proposal">Back to read the proposal</span>
            </a>
          </div>
        </div>
      {% endblock %}
    {% endif %}
  </div>
</section>


<script id="comment-attachment-template" type="text/template">
  <div class="comment-attachment">
    <span class="attachment-progress"></span>
    <span class="attachment-filename"><%= name %></span>
    <span class="attachment-size"><%= size %></span>
    <span class="fa fa-times attachment-remove"></span>
  </div>
</script>

<script id="comment-index-template" type="text/template">
  <h4>Your Comment</h4>
  <p class="comment-index-description">
    You have <span class="comment-count"><%= comments.length == 1 ? comments.length + ' response' : comments.length + ' responses' %></span> pending.
  </p>
  <% _.each(comments, function(comment) { %>
    <li
        class="comment-index-item group"
        data-comment-section="<%= comment.id %>"
        data-comment-toc-section="<%= comment.tocId %>"
        data-comment-label="<%= comment.label %>">
      <div class="comment-index-section"><%= comment.label %></div>
      <div class="comment-index-modify">
        <a class="comment-index-edit" title="Edit Comment" href="#"><span class="fa fa-pencil-square-o"></span></a>
        <a class="comment-index-clear" title="Remove Comment" href="#"><span class="fa fa-times"></span></a>
      </div>
    </li>
  <% }); %>
</script>
