{% extends '_base.html' %}
{% load static %}
{% load i18n %}
{% block content %}
  {% include '_components/header.html' %}

  <div class="internal-wrapper" id="resource-wrapper">
    {% if error_message %}
      <div class="error-box" style="max-width: 400px;">{{ error_message }}</div>
    {% endif %}
    {% if info_message %}
      <div class="info-box">{{ info_message }}</div>
    {% endif %}
    <div id="resource-header">
      {% include '_components/sub_menu.html' %}
    </div>
    <form class="form-box" method="POST">
      <h2>
        <span>{{ resource.name }}</span>
        <span style="display: inline-block; margin-left: 5px;">{{ resource.active }}</span>
      </h2>
      {% for attribute, values, properties in resource.attributes %}
        {% if properties.multi_value %}
          {% include '_components/multi_valued_input.html' with title=attribute %}
        {% else %}
          <div class="single-valued-input">
            <div class="resource-attribute">
              <span>{{ attribute }}</span>
              {% if properties.required %}
                <span style="color: red;">*</span>
              {% endif %}
            </div>
            <div class="resource-values">
              <input type="text" name="{{ attribute }}" value="{{ values.0 }}" 
                {% if not new_resource %}
                  {% if attribute == 'userName' or attribute == 'groupName' %}
                    readOnly
                  {% endif %}
                {% endif %}
                {% if properties.required %}required{% endif %}>
            </div>
          </div>
        {% endif %}
      {% endfor %}
      {% if resource_type == 'User' %}
        {% include '_components/resource_groups.html' with groups=resource.groups %}
      {% endif %}
      {% include '_components/select_backends.html' with backends=resource.backends %}
      {% csrf_token %}
      {% if new_resource %}
        <button class="submit-with-confirm" data-confirm="{% trans 'Are you sure you want to add this resource?' %}" data-canceled="{% trans 'Canceled' %}">{% trans 'Add' %}</button>
      {% else %}
        <button class="submit-with-confirm" data-confirm="{% trans 'Are you sure you want to modify this resource?' %}" data-canceled="{% trans 'Canceled' %}">{% trans 'Modify' %}</button>
      {% endif %}
      <p class="note">{% trans 'Attributes with "*" are required.' %}</p>
    </form>
    {% if resource_type == 'Group' and not new_resource %}
      {% include '_components/resource_members.html' with op='add' %}
      {% include '_components/resource_members.html' with op='delete' %}
    {% endif %}

  </div>

  <form id="resource-confirm-form" class="form-box" method="POST">
    <p class="enable" style="display: none;">{% blocktrans with name=resource.name %}Are you sure you want to enable '{{ name }}'?{% endblocktrans %}</p>
    <p class="disable" style="display: none;">{% blocktrans with name=resource.name %}Are you sure you want to disable '{{ name }}'?{% endblocktrans %}</p>
    <p class="delete" style="display: none;">{% blocktrans with name=resource.name %}Are you sure you want to delete '{{ name }}'?{% endblocktrans %}</p>
    <p class="rename" style="display: none;">{% blocktrans with name=resource.name %}Input new name if you want to rename '{{ name }}'.{% endblocktrans %}</p>
    <p class="ppolicy_unlock" style="display: none;">{% blocktrans with name=resource.name %}Are you sure you want to unlock '{{ name }}'?{% endblocktrans %}</p>
    <input type="hidden" name="name" value="{{ resource.name }}">
    {% include '_components/select_backends.html' with backends=resource.backends %}
    {% csrf_token %}
    <div class="buttons">
      <button type="button">{% trans 'Cancel' %}</button>
      <button type="submit">{% trans 'OK' %}</button>
    </div>
  </form>

  <script type="application/javascript" src="{% static 'js/delete_refresh_query.js' %}"></script>
  <script type="application/javascript" src="{% static 'js/resource_confirm.js' %}"></script>
  <script type="application/javascript" src="{% static 'js/submit_confirm.js' %}"></script>
{% endblock %}