{% extends "browse.html" %}
{% load static %}

{% block header %}
<script src="{% static 'js/showdown/showdown.min.js' %}"></script>
{% endblock %}

{% block swh-browse-main-panel-content %}
{% include "includes/top-navigation.html" %}

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>File</th>
        <th>Mode</th>
        <th>Size</th>
        <th>Sha1 git</th>
      </tr>
    </thead>
    <tbody>
      {% for d in dirs %}
      <tr>
        <td class="swh-directory">
          <i class="fa fa-folder fa-fw" aria-hidden="true"></i>
          <a href="{{ d.url | safe }}">{{ d.name }}</a>
        </td>
        <td>{{ d.perms }}</td>
        <td></td>
        <td>{{ d.target }}</td>
      </tr>
      {% endfor %}
      {% for f in files %}
      <tr>
        <td class="swh-content">
          <i class="fa fa-file-text fa-fw" aria-hidden="true"></i>
          <a href="{{ f.url | safe }}">{{ f.name }}</a>
        </td>
        <td>{{ f.perms }}</td>
        <td>{{ f.length }}</td>
        <td>{{ f.target }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% endblock %}

{% block swh-browse-panels-group-end %}

{% if readme_name %}

<div class="panel panel-default" style="overflow-x: auto;">
  <div class="panel-heading">
    <h2>{{ readme_name }}</h2>
  </div>
  <div id='readme' class="swh-readme panel-body">
  </div>
</div>

<script>
  var converter = new showdown.Converter({tables: true});
  $.ajax({
    url: '{{ readme_url }}',
    dataType: 'text',
    success: function (data) {
      $('#readme').html(converter.makeHtml(data))
    }
  });
</script>

{% endif %}

{% endblock %}