{% extends "base.html" %}
{% load markup %}

{% block navigation %}
{% endblock %}

{% block header %}
        <h1 id="project-detail-title">{{ repo.name }} <br>
          <a class="gitclone" data-toggle="modal" href="#cloneModal">clone your own copy</a> | <a class="gitclone" title="in format tar.gz" href="https://gitlab.constantvzw.org/osp/{{ repo.category }}.{{ repo.name }}/repository/archive.zip?ref=master">download snapshot</a>
        </h1>
        <!--http://git.constantvzw.org/?p=osp.tools.html2print.git;a=snapshot;h=HEAD;sf=tgz-->
        <!-- Header and options when showing a repository -->
        <!-- Navigate through the repository -->
        <ul class="breadcrumb">
            <br><li>&rarr;<a id="#project-nav-about" href="/{{ repo.category }}/{{ repo.name }}/#project-detail-readme"> About</a></li>
            <li>&rarr;<a id="#project-nav-iceberg" href="/{{ repo.category }}/{{ repo.name }}/#project-detail-iceberg"> Snapshots</a></li>
            <li>&rarr;<a id="#project-nav-files" href="/{{ repo.category }}/{{ repo.name }}/#project-detail-files"> Files</a></li>
            <li>&rarr;<a id="#project-nav-commits" href="/{{ repo.category }}/{{ repo.name }}/#project-detail-commits"> Log</a></li>
        </ul>
        <!-- Showing the HEAD-->
        {% comment %}
            <div class="commit-list">
                <ul>
                    <li class="commit" >
                        <p class="commit-id">
                            {{ repo.commits.0.id }}
                        </p>
                        <p>
                            <span class="commit-author">{{ repo.commits.0.author }}</span> <span class="commit-author-said">said</span>
                        </p>
                        <p class="commit-message">
                            <a href="#">{{ repo.commits.0.message }}</a>
                        </p>
                        <p class="commit-date">
                            {{ repo.commits.0.commit_time }}
                        </p>
                    </li>
                </ul>
            </div>
        {% endcomment %}
{% endblock %}


{% block content %}
<div id="project-detail">
{% if root %}
    <div class="left-2">
      <div id="project-detail-readme">
          <h2>About {{ breadcrumb.name }}</h2>
          <article>
              {% if not README %}<h1 class="repo_slug">{{ repo.name }}</h1>{% endif %}
              <div class="project-description-from-the-readme">
                  {{ README|markdown|urlize|safe }}
              </div>
          </article>
      </div>
{% endif %}
<div id="project-detail-iceberg">
    <h2>Snapshots | iceberg</h2>
    <div class="iceberg">
        {% if repo.iceberg.files %}
          {% for ice in repo.iceberg.files|dictsortreversed:"datetime" %}
              <a class="fancybox" rel="gallery" title="{{ ice.name }}" href="/visual/{{ repo.slug }}/{{ice.hex}}/width..1000/{{ ice.name }}">
                <div class="iceberg-thumbnail" style="background: url('/visual/{{ repo.slug }}/{{ice.hex}}/width..400/{{ ice.name }}.png') center center no-repeat; background-size: cover;"></div>
              </a>
          {% endfor %}
        {% else %}
          <pre>No images in this repository’s iceberg at this time</pre>
        {% endif %}
    </div>
</div>

      <div id="project-detail-files">
          <a class="no-underline" href="/{{ repo.category }}/{{ repo.name }}/#project-detail-files"><h2>Inside this repository</h2></a>
          {% block vc_content %}
          {% endblock %}
      </div>
    </div>
    <!--ends left column-->

    {% if root %}
    <div class="right-1">
      <div id="project-detail-commits">
        <h2>Log</h2>
        {% include "commit-list.html" %}
      </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block footer %}
        {% include "partials/footer.html" %}
        <!-- This is shown when you click Git Clone-->
        <div class="modal hide" id="cloneModal">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">×</a>
                <h2>Clone the git repository</h2>
            </div>
            <div class="modal-body">
                <p>The public address for this repo is:</p>
                <pre><a href="https://gitlab.constantvzw.org/osp/{{ repo.category }}.{{ repo.name }}" target="_blank">https://gitlab.constantvzw.org/osp/{{ repo.category }}.{{ repo.name }}</a></pre>
                <p>to clone it, in the terminal type:</p>
                <pre>git clone git@gitlab.constantvzw.org:osp/{{ repo.category }}.{{ repo.name }}.git</pre>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn" data-dismiss="modal">Close</a>
            </div>
        </div>
{% endblock %}

{% block js %}
    {{ block.super }}
    <script src="{{ STATIC_URL }}js/mourner-suncalc-f5bbdac/suncalc-min.js"></script>
    <script>
    $(function() {
        $(".commit").each(function() {
            // var commitDateTime = new Date($(this).data("date")),
            //     times = SunCalc.getTimes(commitDateTime, 50.850, 4.383);
            // var dayBegin = new Date(commitDateTime.getTime());
            //     dayBegin.setHours(0, 0, 0, 0);
            // var dayEnd = new Date(dayBegin.getFullYear(), dayBegin.getMonth(), dayBegin.getDate()+1);
            // var ba = dayEnd - dayBegin;
            // var xa = commitDateTime - dayBegin;
            // var pc = xa / ba * 100;
            // var timeline = $("<div>").css({"border": "1px solid black"});
            //     var commitPoint = $("<div>").css({"background-color": "red", "width": "2px", "height": "5px", "position": "relative", "left": pc + "%"});
            // timeline.append(commitPoint);
            // $(this).prepend(timeline);
            // for (var i in times) {
            //     xa = times[i] - dayBegin;
            //     pc = xa / ba * 100;
            //     var point = $("<div>").css({"background-color": "blue", "width": "2px", "height": "5px", "position": "relative", "left": pc + "%"});
            //     timeline.append(point);
            //
            // }
            //console.log(times);
            //if (commitDateTime < times.sunrise || commitDateTime > times.sunset) {
            //    $(this).css('background-color', 'black');
            //} else {
            //    $(this).css('background-color', 'white');
            //};
        });
    });
    </script>
    <script>
          $(document).ready(function() {
              $('.fancybox').fancybox({
                padding: 0,
                margin: [96, 64, 96, 64],
                height: 'auto',
                autoSize: false,
                autoResize: true,
                autoCenter: true,
                aspectRatio: false,
                arrows: true,
                closeBtn: true,
                closeClick: false,
                helpers: {
                  title : {
                    type : 'inside'
                  }
                },
              });
          });
      </script>
{% endblock %}