{% if h.is_enabled_utilizations() %}

  {% extends "page.html" %}

  {% block styles %}
    {{ super() }}
    {% asset 'feedback/feedback-edit-css' %}
  {% endblock %}

  {% block breadcrumb_content %}
    <li class="inactive"><a href="{{ h.url_for('utilization.search') }}">{{ _('Utilization') }}</a></li>
    <li class="inactive"><a href="{{ h.url_for('utilization.details', utilization_id=utilization_details.id) }}">{{ _('Details') }}</a></li>
    <li class="active"><a href="">{{ _('Edit') }}</a></li>
  {% endblock %}

  {% block title %}{{ _('Edit Utilization') }} - {{ utilization_details.title }} - {{ resource_details.package_name }} - {{ resource_details.resource_name }} - CKAN{% endblock %}

  {% block primary %}
    <article class="module" role="main">
      <div class="module-content">
        {% set message = _('Deleting this utilization will also delete all related comments and certifications of issue resolution.\nAre you sure?')  %}
        <input type="hidden" id="message" name="message" value="{{ message }}">
        <div class="wrap-text">
          <h4>{{ _('Dataset') }}</h4>
          <a href="{{ h.url_for('dataset.read', id=resource_details.package_name) }}">{{ resource_details.package_name }}</a>
          <hr>
          <h4>{{ _('Resource') }}</h4>
          <a href="{{ h.url_for('resource.read', id=resource_details.package_name, resource_id=resource_details.resource_id) }}">{{ resource_details.resource_name }}</a>
          <hr>
        </div>
        <form name="content_form" action="{{ h.url_for('utilization.update', utilization_id=utilization_details.id) }}" method="post">
          <h4>{{ _('Title') }}</h4>
          <input type="text" class="form-control" id="title" name="title" value="{{ utilization_details.title }}" maxlength="50"/>
          <div class="char-count"><span id="title-count" class="comment-count">0</span>/50</div>
          <div>
            <p id="title-none-error" class="alert alert-error" style="display: none;">{{ _('Please enter a title') }}</p>
            <p id="title-over-error" class="alert alert-error" style="display: none;">{{ _('Please keep the title length below 50') }}</p>
          </div>
          <br>
          <hr>
          <small>{{ _('※ option') }}</small>
          <h4>{{ _('URL (Example : The URL for your Website or Service)') }}</h4>
          <input type="url" class="form-control" id="url" name="url" value="{{ utilization_details.url }}" placeholder="https://example.com" maxlength="2048"/>
          <div class="char-count"><span id="url-count" class="comment-count">0</span>/2048</div>
          <div>
            <p id="url-over-error" class="alert alert-error" style="display: none;">{{ _('Please keep the URL length below 2048') }}</p>
          </div>
          <br>
          <hr>
          <h4>{{ _('Description') }}</h4>
          <textarea class="form-control" cols="20" rows="5" id="description" name="description" maxlength="2000">{{ utilization_details.description }}</textarea>
          <div class="char-count"><span id="description-count" class="comment-count">0</span>/2000</div>
          <div>
            <p id="description-none-error" class="alert alert-error" style="display: none;">{{ _('Please enter a description') }}</p>
            <p id="description-over-error" class="alert alert-error" style="display: none;">{{ _('Please keep the description length below 2000') }}</p>
          </div>
          <br>
          <button class="btn btn-primary float-end" onclick="return checkTitleAndDescriptionExists(this);">{{ _('Update') }}</button>
        </form>
        <form name="delete_form" action="{{ h.url_for('utilization.delete', utilization_id=utilization_details.id) }}" method="post">
          <input type="hidden" id="resource_id" name="resource_id" value="{{ resource_details.resource_id }}"/>
          <button class="btn btn-danger pull-left" onclick="return confirmDelete()">{{ _('Delete') }}</button>
        </form>
      </div>
    </article>
  {% endblock %}

  {% block secondary %}{% endblock %}

  {%- block scripts %}
    {{ super() }}
    {% asset 'feedback/feedback-edit-js' %}
  {% endblock -%}

{% endif %}