{% 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 
        {% 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">
        {% if log.log_level == 1 %}
          <div class="row">
            <div class="col-md-2">
                <h4 class="panel-title"><b>Log Type: log</b></h4>
              </div>
              <div class="col-md-5">
                <h4 class="panel-title"><b>Exception Type: {{ log.exception_type }}</b></h4>
              </div>
              <div class="col-md-5">
                <h4 class="panel-title"><b>Share: </b>{{ request.build_absolute_uri }}</h4>
              </div>
          </div>
        {% elif log.log_level == 2 %}
          <div class="row">
            <div class="col-md-7">
              <h4 class="panel-title"><b>Log Type: DEBUG</b></h4>
            </div>
            <div class="col-md-5">
              <h4 class="panel-title"><b>Share: </b>{{ request.get_host }}{% url 'logger:log' log.id %}</h4>
            </div>
          </div>
        {% elif log.log_level == 3 %}
          <div class="row">
            <div class="col-md-7">
              <h4 class="panel-title"><b>Log Type: WARN</b></h4>
            </div>
            <div class="col-md-5">
              <h4 class="panel-title"><b>Share: </b>{{ request.get_host }}{% url 'logger:log' log.id %}</h4>
            </div>
          </div>
        {% elif log.log_level == 4 %}
          <div class="row">
            <div class="col-md-7">
              <h4 class="panel-title"><b>Log Type: INFO</b></h4>
            </div>
            <div class="col-md-5">
              <h4 class="panel-title"><b>Share: </b>{{ request.get_host }}{% url 'logger:log' log.id %}</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 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 class="col-md-12">
    <form action="{% url 'logger:log' log.id %}" method="POST">
      {% csrf_token %}
      <button type="submit" class="btn btn-danger pull-right">Delete</button>
    </form>
  </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 %}