{% extends 'site_templates/site_master.html' %}
{% load staticfiles %}

{% block header_block %}
  <title>Server Logs</title>


  <link rel="stylesheet" href="{% static 'plugins/highlightjs/highlight.min.css' %}" />
  

  <link rel="stylesheet" href="{% static 'plugins/jquery.json-viewer/jquery.json-viewer.css' %}">
  
{% endblock %}

{% block body_block %}
  <h2>Server Logs</h2>
  <div class="panel-group" id="accordion">
    {% for log in logs %}
      <div class="panel 
          {% if log.log_level == 1 %}
            panel-danger
          {% elif log.log_level == 2 %}
            panel-success
          {% elif log.log_level == 3 %}
            panel-warning
          {% elif log.log_level == 4 %}
            panel-info
          {% else %}
            panel-default
          {% endif %}">
        <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#log{{ log.id }}" style="cursor: pointer;">
          {% if log.log_level == 1 %}
            <div class="row">
              <div class="col-md-4">
                <h4 class="panel-title"><b>Log Type: log</b></h4>
              </div>
              <div class="col-md-4">
                <h4 class="panel-title"><b>Exception Type: {{ log.exception_type }}</b></h4>
              </div>
            </div>
          {% elif log.log_level == 2 %}
            <div class="row">
              <div class="col-md-4">
                <h4 class="panel-title"><b>Log Type: DEBUG</b></h4>
              </div>
            </div>
          {% elif log.log_level == 3 %}
            <div class="row">
              <div class="col-md-4">
                <h4 class="panel-title"><b>Log Type: WARN</b></h4>
              </div>
            </div>
          {% elif log.log_level == 4 %}
            <div class="row">
              <div class="col-md-4">
                <h4 class="panel-title"><b>Log Type: INFO</b></h4>
              </div>
            </div>
          {% endif %}
          <div class="row">
            <div class="col-md-4">
              <b>Url:</b> {{ log.request_url }}
            </div>
            <div class="col-md-4">
              <b>Method:</b> {{ log.request_method }}
            </div>
            <div class="col-md-4">
              <b>{{ log.created_on }}</b>
            </div>
          </div>
        </div>
        <div id="log{{ log.id }}" class="panel-collapse collapse">
          <div class="panel-body">
            <div class="row">
              <div class="col-md-2">
                <b>Message:</b>
              </div>
              <div class="col-md-10">
                <pre>{{ log.message }}</pre>
              </div>
            </div>
            <div class="row">
              <div class="col-md-2">
                <b>User Id:</b>
              </div>
              <div class="col-md-10">
                <pre>{{ log.user_id }}</pre>
              </div>
            </div>
            <div class="row">
              <div class="col-md-2">
                <b>User Name:</b>
              </div>
              <div class="col-md-10">
                <pre>{{ log.user_name }}</pre>
              </div>
            </div>
            <div class="row">
              <div class="col-md-2">
                <b>Stack Trace:</b>
              </div>
              <div class="col-md-10">
                <pre><code>{{ log.stack_trace }}</code></pre>
              </div>
            </div>


            <ul class="nav nav-tabs">
              <li class="active"><a data-toggle="tab" href="#request{{ log.id }}">Request</a></li>
              <li><a data-toggle="tab" href="#response{{ log.id }}">Response</a></li>
              <li><a data-toggle="tab" href="#device{{ log.id }}">Device</a></li>
            </ul>
            <div class="tab-content">

              <div id="request{{ log.id }}" class="tab-pane fade in active">
                <h3>Request</h3>
                <div class="row">
                  <div class="col-md-2">
                    <b>GET Data:</b>
                  </div>
                  <div class="col-md-10">
                    <input type="hidden" id="logGetData" value="{{ log.get_data }}" />
                    <pre id="logGet" style="padding-left: 3%;"></pre>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-2">
                    <b>Body:</b>
                  </div>
                  <div class="col-md-10">
                    <input type="hidden" id="logBodyData" value="{{ log.request_body }}" />
                    <pre id="logBody" style="padding-left: 3%;"></pre>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-2">
                    <b>Cookies:</b>
                  </div>
                  <div class="col-md-10">
                    <input type="hidden" id="logCookiesData" value="{{ log.cookies }}" />
                    <pre id="logCookies" style="padding-left: 3%;"></pre>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-2">
                    <b>Meta:</b>
                  </div>
                  <div class="col-md-10">
                    <input type="hidden" id="logMetaData" value="{{ log.meta }}" />
                    <pre id="logMeta" style="padding-left: 3%;"></pre>
                  </div>
                </div>
              </div>


              <div id="response{{ log.id }}" class="tab-pane fade">
                <h3>Response</h3>
                <div class="row">
                  <div class="col-md-2">
                    <b>Body:</b>
                  </div>
                  <div class="col-md-10">
                    <input type="hidden" id="logResponseBodyData" value="{{ log.response_body }}" />
                    <pre id="logResponseBody" style="padding-left: 3%;"></pre>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-2">
                    <b>Status:</b>
                  </div>
                  <div class="col-md-10">
                    <pre><code>{{ log.response_status }}</code></pre>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-2">
                    <b>Headers:</b>
                  </div>
                  <div class="col-md-10">
                    <input type="hidden" id="logResponseHeadersData" value="{{ log.response_headers }}" />
                    <pre id="logResponseHeaders" style="padding-left: 3%;"></pre>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-2">
                    <b>Content Type:</b>
                  </div>
                  <div class="col-md-10">
                    <pre><code>{{ log.response_content_type }}</code></pre>
                  </div>
                </div>
              </div>


              <div id="device{{ log.id }}" class="tab-pane fade">
                <h3>Device</h3>
                <div class="row">
                  <div class="col-md-2">
                    <b>Browser:</b>
                  </div>
                  <div class="col-md-10">
                    <pre><code>{{ log.request_browser }}</code></pre>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-2">
                    <b>OS:</b>
                  </div>
                  <div class="col-md-10">
                    <pre><code>{{ log.request_os }}</code></pre>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-2">
                    <b>Device:</b>
                  </div>
                  <div class="col-md-10">
                    <pre><code>{{ log.request_device }}</code></pre>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-2">
                    <b>Device Type:</b>
                  </div>
                  <div class="col-md-10">
                    <table class="table table-bordered">
                      <thead>
                        <tr>
                          <th>Mobile</th>
                          <th>Tablet</th>
                          <th>Touch Capable</th>
                          <th>PC</th>
                          <th>Bot</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr class="info">
                          <td>{{ log.is_mobile }}</td>
                          <td>{{ log.is_tablet }}</td>
                          <td>{{ log.is_touch_capable }}</td>
                          <td>{{ log.is_pc }}</td>
                          <td>{{ log.is_bot }}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>


            


            
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
  <div class="row">
    <div class="col-md-10">
      <ul class="pagination pagination-md">
        {% if logs.has_previous %}
          <li><a href="?page={{ logs.previous_page_number }}">Previous</a></li>
        {% endif %}
        <li class="disabled"><a href="#">Page {{ logs.number }} of {{ logs.paginator.num_pages }}</a></li>
        {% if logs.has_next %}
          <li><a href="?page={{ logs.next_page_number }}">Next</a></li>
        {% endif %}
      </ul>
    </div>
    <div class="col-md-2">
      <form action="{% url 'logger:all_logs' %}" method="POST">
        {% csrf_token %}
        <button type="submit" class="btn btn-danger pull-right">Delete All</button>
      </form>
    </div>
  </div>
{% endblock %}

{% block js_block %}
  <script src="{% static 'plugins/highlightjs/highlight.min.js' %}"></script>
  <script src="{% static 'plugins/jquery.json-viewer/jquery.json-viewer.js' %}"></script>

  <script src="{% static 'logger/js/all_logs.js' %}"></script>
  <script>hljs.initHighlightingOnLoad();</script>
{% endblock %}