{% extends '_base.html' %}
{% load static %}
{% load i18n %}
{% load attribute %}

{% block content %}

{% include 'user/header.html' with title=resource.name %}

  <div class="internal-wrapper" id="resource-wrapper">
  {% if messages %}
  {% for message in messages %}
      {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
          <div class="error-box" style="max-width: 400px;">{{ message }}</div>
      {% else %}
          {% if message.level == DEFAULT_MESSAGE_LEVELS.INFO %}
              <div class="info-box">{{ message }}</div>
          {% endif %}
      {% endif %}
{% endfor %}
{% endif %}

    <form class="wide-form-box" method="POST">
      <h2>{{ resource.name }}</h2>

      {% for attribute, values in resource.attributes %}

      <div class="form-group">

        <label class="control-label" for="{{ attribute.id }}">
          <span class="attribute-id">{{ attribute.id }}</span>
          {% translate_name attribute 'User' target as name %}
          {% if name %}<span class="attribute-name">({{ name }})</span>{% endif %}

          {% if attribute.required %}
            <span style="color: red;">*</span>
          {% endif %}
        </label>

        <div class="controls">
        {% if attribute.multi_value %}
            {% for value in values %}
            <div class="multivalue-input-group">
                <input type="text" name="{{ attribute.id }}"
                value="{{ value }}"
                {% if attribute.required %}required{% endif %}><span class="input-remove">&#x2296;</span>
            </div>
            {% empty %}
            <div class="multivalue-input-group">
                <input type="text" name="{{ attribute.id }}"
                value=""
                {% if attribute.required %}required{% endif %}><span class="input-remove">&#x2296;</span>
            </div>
            {% endfor %}
    
            <div class="button-round input-add"
                data-attribute="{{ attribute.id }}"
                data-size="{{ values|length }}"
                data-required="{% if attribute.required %}yes{% endif %}">{% trans 'Add Input' %}</div>
    
        {% else %}
            <input type="text" class="form-control" name="{{ attribute.id }}" value="{{ values.0 }}"
            {% if not new_resource %}
                {% if attribute.id == 'userName' or attribute.id == 'groupName' %}readOnly{% endif %}
            {% endif %}
            {% if attribute.required %}required{% endif %}>
        {% endif %}

        {% translate_description attribute 'User' target as description %}
        {% if description %}<p class="attribute-description">{{ description }}</p>{% endif %}
        </div>

      </div>
      {% endfor %}
      {% csrf_token %}
      <button autocomplete="off" class="submit-with-confirm" data-confirm="{% trans 'Are you sure you want to modify this resource?' %}" data-canceled="{% trans 'Canceled' %}">{% trans 'Modify' %}</button>
      {% include '_components/required_field_message.html' %}
    </form>
  </div>

  <script type="application/javascript" src="{% static 'js/multi_valued_input.js' %}"></script>
  <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 %}