{% extends "base.html" %}

{% block title %}{% if title %}{{ title }}{% else %}{{ filename or '' }} - Grip{% endif %}{% endblock %}

{%- block styles -%}
  {%- for style_url in style_urls %}
  <link rel="stylesheet" href="{{ style_url }}" />
  {%- endfor %}
  <link rel="stylesheet" href="{{ url_for('static', filename='octicons/octicons.css') }}" />
  {%- if styles %}
  <style>
    {%- for style in styles %}
    {{ style|safe }}
    {%- endfor %}
  </style>
  {%- endif %}
  <style>
    /* Page tweaks */
    .preview-page {
      margin-top: 64px;
    }
    /* User-content tweaks */
    .timeline-comment-wrapper > .timeline-comment:after,
    .timeline-comment-wrapper > .timeline-comment:before {
      content: none;
    }
    /* User-content overrides */
    .discussion-timeline.wide {
      width: 920px;
    }
  </style>
{%- endblock -%}

{%- block scripts -%}
  <script>
    function showCanonicalImages() {
      var images = document.getElementsByTagName('img');
      if (!images) {
        return;
      }
      for (var index = 0; index < images.length; index++) {
        var image = images[index];
        if (image.getAttribute('data-canonical-src') && image.src !== image.getAttribute('data-canonical-src')) {
          image.src = image.getAttribute('data-canonical-src');
        }
      }
    }

    function scrollToHash() {
      if (location.hash && !document.querySelector(':target')) {
        var element = document.getElementById('user-content-' + location.hash.slice(1));
        if (element) {
           element.scrollIntoView();
        }
      }
    }

    function autorefreshContent(eventSourceUrl) {
      var initialTitle = document.title;
      var contentElement = document.getElementById('grip-content');
      var source = new EventSource(eventSourceUrl);
      var isRendering = false;

      source.onmessage = function(ev) {
        var msg = JSON.parse(ev.data);
        if (msg.updating) {
          isRendering = true;
          document.title = '(Rendering) ' + document.title;
        } else {
          isRendering = false;
          document.title = initialTitle;
          contentElement.innerHTML = msg.content;
          showCanonicalImages();
        }
      }

      source.onerror = function(e) {
        if (e.readyState === EventSource.CLOSED && isRendering) {
          isRendering = false;
          document.title = initialTitle;
        }
      }
    }

    window.onhashchange = function() {
      scrollToHash();
    }

    window.onload = function() {
      scrollToHash();
    }

    showCanonicalImages();

    var autorefreshUrl = document.getElementById('preview-page').getAttribute('data-autorefresh-url');
    if (autorefreshUrl) {
      autorefreshContent(autorefreshUrl);
    }
  </script>
{%- endblock -%}

{%- block page -%}
  <div id="preview-page" class="preview-page" data-autorefresh-url="{{ autorefresh_url if autorefresh_url }}">

    {% if not user_content %}

      <div role="main" class="main-content">
        <div class="container new-discussion-timeline experiment-repo-nav">
          <div class="repository-content">
            <div id="readme" class="readme boxed-group clearfix announce instapaper_body md">
              {% if not user_content and title or filename %}
                <h3>
                  <span class="octicon octicon-book"></span>
                  {% if title %}{{ title }}{% else %}{{ filename }}{% endif %}
                </h3>
              {% endif %}
              <article class="markdown-body entry-content" itemprop="text" id="grip-content">
                {{ content|safe }}
              </article>
            </div>
          </div>
        </div>
      </div>

    {% else %}

      <div role="main" class="main-content">
        <div class="container new-discussion-timeline experiment-repo-nav">
          <div class="repository-content">
            <div class="issues-listing" data-pjax="">
              <div id="show_issue" class="js-issues-results">
                <div id="discussion_bucket" class="clearfix">
                  <div class="discussion-timeline js-quote-selection-container {{ 'wide' if wide_style }}">
                    <div class="timeline-comment-wrapper js-comment-container">
                      <div class="comment  timeline-comment js-comment js-task-list-container is-task-list-enabled">
                        <div class="comment-content">
                          <div class="edit-comment-hide">
                            <div class="comment-body markdown-body markdown-format js-comment-body" id="grip-content">
                              {{ content|safe }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    {% endif %}

  </div>
  <div>&nbsp;</div>
{%- endblock -%}
