{% extends '_base.html' %}
{% load static %}
{% load i18n %}
{% 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="form-box" method="POST">
      <h2>{{ resource.name }}</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 attribute == 'userName' %}readOnly{% endif %}
                {% if properties.required %}required{% endif %}>
            </div>
          </div>
        {% endif %}
      {% 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/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 %}