{% extends "base_dashboard_company.html" %}
{% load static %}
{% block content %}
<style>
  #banner {
 background:
   url("https://i.postimg.cc/FzSHSbhQ/img-soccer.jpg") no-repeat;
  background-size: cover;
  height: 400px;
  background-position: 0 0;
}

@media screen and (max-width:768px){
  
 #banner {
  background-size: cover;
  height: 300px;
  background-position: right bottom;
} 
  
#banner h1{
  font-size: 3.2rem !important;
}
 
  #banner p{
    padding:0.5rem;
    text-align: center;
  }
  
}
.text-light {
  color: #f8f9fa!important;
}

h5.card-title{
  line-height:1.6rem;
}


#footer a {
    padding: 0.8rem;
}
.badge-company {
      display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
}
.pl-4, .px-4 {
    padding-left: 1.5rem!important;
}
.mt-4, .my-4 {
    margin-top: 1.5rem!important;
}
.font-italic {
    font-style: italic!important;
}
.start-btn {
    float: right;
    margin: 100px 25px;
    width: 150px;
}
.time-remaining-btn {
    float: right;
    margin: 100px 25px;
    width: auto;

}
.table {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.table td,
.table th {
  border: 1px solid #ddd;
  padding: 8px;
}

table.table tbody tr.selected {
  background-color: #f2f2f2;
}

.table tr:hover {
  background-color: #ddd !important;
}

.table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4caf50;
  color: white;
}

</style>
<link href="{% static 'mdeditor/css/editormd.min.css' %}" rel="stylesheet">
  <link href="{% static 'mdeditor/css/editormd.preview.css' %}" rel="stylesheet">
                

<main style="
    margin: -40px -2em 0px;
">
  <!--banner-->
  <article id="banner" class="jumbotron jumbotron-fluid">
    <div class="font-italic pl-4 mt-4 text-light">
      <h1 class="display-1 font-italic">
        {{hunt.domain.company.name}}
        <span class="badge-company badge-primary shadow">{{hunt.domain.name}}</span>
      </h1>

      <p class="lead mt-5">
        Ended
      </p>
    </div>
  </article>
  <!--banner end-->

</main>
{% if hunt.result_published %}
<table class="table">
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
        </tr>
    </thead>
    <tbody>
      {% if winner.winner %}
        <tr>
            <td>1</td>
            <td>{{winner.winner}}</td>
        </tr>
      {% endif %}
      {% if winner.runner %}
        <tr>
            <td>2</td>
            <td>{{winner.runner}}</td>
        </tr>
      {% endif %}
      {% if winner.second_runner %}
        <tr>
            <td>3</td>
            <td>{{winner.second_runner}}</td>
        </tr>
      {% endif %}
    </tbody>
</table>
{% else %}
<form method="post" id="publish_result">
  {% csrf_token%}
<table class="table">
    <thead>
        <tr>
            <th>
                <input type="checkbox" class="checkAll" name="checkAll" />
            </th>
            <th>id</th>
            <th>points</th>
            <th>description</th>
            <th>type</th>
        </tr>
    </thead>
    <tbody>
      {% for issue in issues %}
        <tr>
            {% if issue.verified %}
            <td><input type="checkbox" name="item_{{issue.pk}}" checked></td>
            {% else %}
            <td><input type="checkbox" name="item_{{issue.pk}}"></td>
            {% endif %}
            <td>{{forloop.counter}}</td>
            <td><input type="number" value="{{issue.score}}" name="value_{{issue.pk}}"/></td>
            <td>{{issue.description}}</td>
            <td>{{issue.get_label_display}}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
<button class="btn btn-danger" name="submit" value="save">Save</button>
<button class="btn btn-danger" name="submit" value="publish">Save and Publish Result</button>
</form>
{% endif %}

                  <script src="{% static 'mdeditor/js/jquery.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/editormd.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/lib/marked.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/lib/prettify.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/lib/raphael.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/lib/underscore.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/lib/sequence-diagram.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/lib/flowchart.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/lib/jquery.flowchart.min.js' %}"></script>
<script type="text/javascript">
  $(document).ready(function() {
  $(".checkAll").on("click", function() {
    $(this)
      .closest("table")
      .find("tbody :checkbox")
      .prop("checked", this.checked)
      .closest("tr")
      .toggleClass("selected", this.checked);
  });

  $("tbody :checkbox").on("click", function() {
    // toggle selected class to the checkbox in a row
    $(this)
      .closest("tr")
      .toggleClass("selected", this.checked);

    // add selected class on check all
    $(this).closest("table")
      .find(".checkAll")
      .prop("checked",
        $(this)
          .closest("table")
          .find("tbody :checkbox:checked").length ==
          $(this)
            .closest("table")
            .find("tbody :checkbox").length
      );
  });
});

</script>
  <script>
  $(function () {
      editormd.markdownToHTML("content", {
          emoji           : true,
          taskList        : true,
          tex             : true,  
          flowChart       : true,  
          sequenceDiagram : true,  
      });

      $(".reference-link").each(function (i,obj) {
        console.log(obj)
      })
  })

</script>

{% endblock %}