{% extends "base_dashboard.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>
    <section>
        {% include "includes/company_sidenav.html" %}
    </section>
    <link href="{% static 'mdeditor/css/editormd.min.css' %}" rel="stylesheet">
    <link href="{% static 'mdeditor/css/editormd.preview.css' %}"
          rel="stylesheet">
    <main class="-mt-10 -mx-8">
        <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>
    </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="https://code.jquery.com/jquery-3.7.1.min.js"
            integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
            crossorigin="anonymous"></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() {
    $(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 content %}