{% extends "base.html" %}
{% block title %}GitHub Repository Software{% endblock %}
{% block head %}
{{ super() }}
<style>
.search-found {
  background-color: yellow;
}
</style>
{% endblock %}
{% block content %}
<div class='container-fluid'>
  <div class='row'>
    <div class='col-sm-12'>
      <br>
      <div class="form-horizontal">
        <div class="form-group has-feedback">
          <div class='col-sm-12'>
            <input class='form-control table-sortable-search' placeholder="Press Enter to Search..." type='search'>
            <span class='glyphicon glyphicon-remove form-control-feedback search-cancel-button'></span>
          </div>
        </div>
      </div>
      <br>
      <div class='panel panel-default'>
        <div class='table-responsive' id="app">
          <h2 style="margin-left:5px">> {{ repo.uid }}</h2>
          <hr> 
          <div class="row">
            <div class="col-md-3">
              <div class="panel panel-default panel-with-sidebar">
                <section>
                  <div class="panel-heading"><span class="badge badge-blue">Data</span></div>
                  <div class="panel-body">
			  <table class="table table-sortable">
			    <thead>
			      <tr>
				<th>Key</th>
				<th>Value</th>
			      </tr>
			    </thead>
			    <tbody>
			      <tr>
				<td>Parser</td>
				<td>{{ repo.parser }}</td>
			      </tr>
			      <tr>
				<td>Description</td>
				<td>{{ repo.data.description }}</td>
			      </tr>
			      <tr>
				<td>Repository</td>
				<td><a href="{{ repo.data.html_url }}" target="_blank">{{ repo.data.html_url }}</a></td>
			      </tr>
			      {% if repo.data.homepage %}<tr>
				<td>Homepage</td>
				<td><a href="{{ repo.data.homepage }}" target="_blank">{{ repo.data.homepage }}</a></td>
			      </tr>{% endif %}
			      {% if repo.data.doi %}<tr>
				<td>DOI</td>
				<td>{{ repo.data.doi }}</td>
			      </tr>{% endif %}
			      <tr>
				<td>Stars</td>
				<td>{{ repo.data.stargazers_count }} ⭐️</td>
			      </tr>
			      <tr>
				<td>Watchers</td>
				<td>{{ repo.data.watchers_count }} 👀️</td>
			      </tr>
			      <tr>
				<td>Entry Updated</td>
				<td>{{ repo.data.timestamp }}</td>
			      </tr>
			    </tbody>
			  </table>
                  </div>
                </section>
                <section>
                 <a href="https://github.com/{{ repo.data.owner.login }}/" target="_blank"><img src="{{ repo.data.owner.avatar_url }}" style="max-width:95%"></a><br>
                 <a href="/"><button style="margin:10px" type="button" class="btn btn-primary">< Back</button></a>
                </section>
              </div>
            </div>
            <div class="col-md-9">
            <div class="panel panel-default panel-with-sidebar">
              <section>
                <div class="panel-heading"><span class="badge badge-green">Metadata</span></div>
                  <div style="display: none" id="hidden-output">{% for key, value in repo.data.items() %}{% if key not in skips %}
                    <strong>{{ key }}</strong>: {{ value }}<br>{% endif %}
                  {% endfor %}</div>
                  <div class="panel-body" id="output">{% for key, value in repo.data.items() %}{% if key not in skips %}
                    <strong>{{ key }}</strong>: {{ value }}<br>{% endif %}
                  {% endfor %}
                 </div>
              </section>
            </div>
            </div>
	</div>

  <div class="controls">
    <span style="float:right; margin-right:30px" class="badge badge-primary">database: {{ database }}</span>
  </div>
  <hr>
</div>
{% endblock %}
{% block footer %}
{{ super() }}
<script>

$(document).on('keypress',function(e) {
});

$('input[type="search"]').on('keypress',function(e) {
  // Do search on pressing enter
  if(e.which == 13) {
    var t = $(this);
    var value = t.val();
    var content = $("#hidden-output").html();
    content = content.replace(value, '<span style="background-color:yellow">' + value + '</span>');
    $("#output").html(content);
  }  
});

$('input[type="search"] + .search-cancel-button').hide($(this).prev('input').val()).click(function () {
  $(this).prev('input').val('').focus();
  $(this).hide();
});

</script>
{% endblock %}
