{% extends 'reports/base_index.html' %}
{% load course_filter %}
{% block title %}Проверки{% endblock %}
{% block page_title %}Проверки{% endblock %}
{% block head %}
  <style>
  #project-label {
    display: block;
    font-weight: bold;
    margin-bottom: 1em;
  }
  #project-description {
    margin: 0;
    padding: 0;
  }
  </style>
  <script>
  $(function() {
    var projects = [
      {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        icon: "jquery_32x32.png"
      },
      {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        icon: "jqueryui_32x32.png"
      },
      {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        icon: "sizzlejs_32x32.png"
      }
    ];

    $( "#project" ).autocomplete({
      minLength: 0,
      source: projects,
      focus: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        $( "#project-id" ).val( ui.item.value );
        $( "#project-description" ).html( ui.item.desc );
        $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

        return false;
      }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
        .appendTo( ul );
    };
  });
  </script>
{% endblock %}
{% block content %}
        <h3 style="margin-left: 20px;font-weight: bold;">
           <i class="glyphicon glyphicon-time"></i> Проверки по пользователю
        </h3>
    <div style="    position: absolute;
    right: 10px;
    top: 50px;">
        <img id="project-icon" src="/static/img/user_photo.jpg" class="ui-state-default" alt="" style="max-width: 70px;
    float: left;
    padding: 5px;">
    <div style="    float: left;
    padding: 5px;">
        <span>Фамилия</span><span style="margin-left: 5px;">Имя</span><Br>
          <small class="text-muted" style="{% if request.user.status == 'ON' %}color:green;{% endif %}font-weight: bold;">
              {% if request.user.status == 'ON' %}<i class="glyphicon glyphicon-ok-sign"></i> {% else %}<i class="glyphicon glyphicon-time"></i>{% endif %}
              {{ request.user.get_status_display }}</small><br>
          <small class="text-muted">Регистрация: </small>
    </div>
    </div>
<hr style="    border: 1px dotted #999;">
    <div style="    padding: 10px 5%;text-align: center;
    background: #ffc;    border-top: 2px solid #ff1;
    border-bottom: 2px solid #ff1;">
    <div id="project-label">Введите Email искомого пользователя:</div>

<input id="project" style="    float: left;
    border-radius: 2px;
    display: block;
    width: 100%;
    height: 50px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background: #fff none;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    text-align: center;font-size: 25px;font-weight: bold;">
    <input type="hidden" id="project-id">
        <div>

        </div>


<p id="project-description"></p>
    </div>

{% endblock %}
{% block js %}
{% endblock %}