{% extends "framework.html" %}

{% block content %}

  {% block action_modals %}
    {% include "modals/objects/edit_user_modal.html" %}
    {% include "modals/objects/edit_password_modal.html" %}
    {% include "modals/collections/new_prediction_setting_modal.html" %}
    {% include "modals/objects/manage_api_token_modal.html" %}
    {% include "modals/objects/generic_delete_modal.html" %}
  {% endblock action_modals %}

  <div class="panel-group" id="user-detail">
    <div class="panel panel-default">
      <div
        class="panel-heading"
        id="headingPanel"
        style="font-size:2rem;height: 46px"
      >
        {{ user.username }}
        <div
          id="actionsButton"
          style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
          class="dropdown"
        >
          <a
            href="#"
            class="dropdown-toggle"
            data-toggle="dropdown"
            role="button"
            aria-haspopup="true"
            aria-expanded="false"
            ><span class="glyphicon glyphicon-wrench"></span> Actions
            <span class="caret"></span><span style="padding-right:1em"></span
          ></a>
          <ul id="actionsList" class="dropdown-menu">
            {% block actions %}
              {% include "actions/objects/user.html" %}
            {% endblock %}
          </ul>
        </div>
      </div>
      <div class="panel-body">
        <p>
          On this page you can modify your account or set preferences such as
          prediction settings.
        </p>
      </div>
    </div>
    <!-- Default Package -->
    <div
      class="panel panel-default panel-heading list-group-item"
      style="background-color:silver"
    >
      <h4 class="panel-title">
        <a
          id="default-package-link"
          data-toggle="collapse"
          data-parent="#user-detail"
          href="#default-package"
          >Default Package</a
        >
      </h4>
    </div>
    <div id="default-package" class="panel-collapse in collapse">
      <div class="panel-body list-group-item">
        <li class="list-group-item">
          <a href="{{ user.default_package.url }}">
            {{ user.default_package.name|safe }}</a
          >
        </li>
      </div>
    </div>

    <!-- Groups -->
    {% if meta.available_groups|length > 0 %}
      <div
        class="panel panel-default panel-heading list-group-item"
        style="background-color:silver"
      >
        <h4 class="panel-title">
          <a
            id="group-links"
            data-toggle="collapse"
            data-parent="#user-detail"
            href="#groups"
            >Groups</a
          >
        </h4>
      </div>
      <div id="groups" class="panel-collapse in collapse">
        <div class="panel-body list-group-item">
          {% for g in meta.available_groups %}
            <li class="list-group-item">
              <a href="{{ g.url }}"> {{ g.name|safe }}</a>
            </li>
          {% endfor %}
        </div>
      </div>
    {% endif %}

    <!-- Current Prediction Settings -->
    <div
      class="panel panel-default panel-heading list-group-item"
      style="background-color:silver"
    >
      <h4 class="panel-title">
        <a
          id="current-prediction-setting-links"
          data-toggle="collapse"
          data-parent="#user-detail"
          href="#current-prediction-setting"
          >Current Prediction Setting</a
        >
      </h4>
    </div>
    <div id="current-prediction-setting" class="panel-collapse in collapse">
      <div class="panel-body list-group-item">
        <table class="table-bordered table-hover table">
          <tr style="background-color: rgba(0, 0, 0, 0.08);">
            <th scope="col" width="20%">Parameter</th>
            <th scope="col" width="80%">Value</th>
          </tr>
          <tbody>
            {% if user.default_setting.model %}
              <tr>
                <td width="20%">Model</td>
                <td width="80%">
                  <table width="100%" class="table-bordered table-hover table">
                    <tbody>
                      <tr>
                        <td colspan="2">
                          <li class="list-group-item">
                            <a href="{{ user.default_setting.model.url }}">
                              {{ user.default_setting.model.name|safe }}
                            </a>
                          </li>
                        </td>
                      </tr>
                      <tr>
                        <th width="20%">Model Parameter</th>
                        <th width="80%">Parameter Value</th>
                      </tr>
                      <tr>
                        <td width="20%">Threshold</td>
                        <td width="80%">
                          {{ user.default_setting.model_threshold }}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            {% endif %}
            {% if user.default_setting.rule_packages.all %}
              <tr>
                <td width="20%">Rule Packages</td>
                <td width="80%">
                  <table width="100%" class="table-bordered table-hover table">
                    <tbody>
                      <tr>
                        <td colspan="2">
                          {% for p in user.default_setting.rule_packages.all %}
                            <li class="list-group-item">
                              <a href="{{ p.url }}"> {{ p.name|safe }} </a>
                            </li>
                          {% endfor %}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            {% endif %}
            <tr>
              <td>
                <p>Max Nodes</p>
              </td>
              <td>
                <p>{{ user.default_setting.max_nodes }}</p>
              </td>
            </tr>
            <tr>
              <td>
                <p>Max Depth</p>
              </td>
              <td>
                <p>{{ user.default_setting.max_depth }}</p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
{% endblock content %}