{% import 'macros/form.html' as form %}
{% set action = g.form_action or '' %}
{% set organizations = h.organizations_available('create_dataset') %}

{# This provides a full page that renders a form for adding a dataset. It can
then itself be extended to add/remove blocks of functionality. #}
{% block stages %}
  {{ h.snippet('package/snippets/stages.html', stages=stage) }}
{% endblock %}
{% block errors %}{{ form.errors(error_summary) }}{% endblock %}

{% block basic_fields %}
<div id="vue-app-package">
  <input type="hidden" ref="packageId" value="{{ data.id }}" />
  <input type="hidden" ref="userName" value="{{ c.userobj.name }}">
  <input type="hidden" ref="userEmail" value="{{ c.userobj.email }}">
  <div ref="success-message"></div>
  <div v-if="has_error">
    <div class="alert alert-danger">
        <ul>
          <li v-for="error in error_summary">
            [[ error ]]
          </li>
        </ul>
      </div>
  </div>
  <div class="form-group control-full control-large">
    <label class="form-label" for="field-title">Title <span class="required">*</span></label>
    <div class="controls ">
        <div class="form-group">
            <input type="text" v-model="form.title" class="form-control" @keyup="slugifyTitle">
        </div>
    </div>
  </div>
  <div class="form-group control-full control-large">
    <label class="form-label" for="field-title">URL</label>
    <div class="controls ">
        <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1">/dataset/</span>
            <input type="text" v-model="form.name" class="form-control">
        </div>
    </div>
  </div>
  <div class="form-group control-full control-large">
    <label class="form-label" for="field-title">Description <span class="required" v-if="isRequired('description')">*</span></label>
    <div class="controls ">
        <div class="form-group">
            <textarea v-model="form.notes" class="form-control" rows="4"></textarea>
        </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3">
      <div class="form-group control-full control-large">
        <label class="form-label" for="field-title">Organization <span class="required">*</span></label>
        <div class="controls ">
            <div class="form-group">
              {% if organizations|length > 1 %}
                <select class="form-select" v-model="form.organization" id="">
                  <option value="">Select the Organization</option>
                  {% for organization in organizations %}
                  <option value="{{ organization.id }}">{{ organization.title }}</option>
                  {% endfor %}
                </select>
                <input ref="organizationId" value="" type="hidden">
              {% else %}
                <input value="{{ organizations[0].title }}" type="text" class="form-control" disabled>
                <input ref="organizationId" value="{{ organizations[0].id }}" type="hidden">
                <input v-model="form.organization" type="hidden">
              {% endif %}
            </div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="form-group control-full control-large">
        <label class="form-label" for="field-title">Visibility</label>
        <div class="controls ">
            <div class="form-group">
                <select class="form-select"  v-model="form.visibility" id="">
                  <option v-for="visibility in visibilityOptions" :value="visibility.value">[[ visibility.text ]]</option>
                </select>
            </div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="form-group control-full control-large">
        <label class="form-label" for="field-title">Type</label>
        <div class="controls ">
            <div class="form-group">
                <select class="form-select"  v-model="form.type" id="">
                  <option v-for="type in typeOptions" :value="type.value">[[ type.text ]]</option>
                </select>
            </div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="form-group control-full control-large">
        <label class="form-label" for="field-title">License <span class="required" v-if="isRequired('license')">*</span></label>
        <div class="controls ">
            <div class="form-group">
                <select class="form-select"  v-model="form.license" id="id_license">
                  <option v-for="license in licenseOptions" :value="license.value">[[ license.text ]]</option>
                </select>
            </div>
        </div>
      </div>
    </div>
    <div class="col-md-9">
      <div class="form-group control-full control-large">
        <label class="form-label" for="field-title">Source <span class="required" v-if="isRequired('source')">*</span></label>
        <div class="controls ">
            <div class="form-group">
                <input type="text" v-model="form.source" class="form-control">
            </div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="form-group control-full control-large">
        <label class="form-label" for="field-title">Version <span class="required" v-if="isRequired('version')">*</span></label>
        <div class="controls ">
            <div class="form-group">
                <input type="text" v-model="form.version" class="form-control">
            </div>
        </div>
      </div>
    </div>
  </div>
  <br>
  <h2><b>{{ _('Contributors') }}</b></h2>
  <br>
  <nav class="navbar navbar-expand-lg border rounded container" style="margin-bottom: 15px;background-color: #EEEEEE;" v-for="contributor in form.contributors">
    <i class="fa-solid fa-user fa-2x"></i>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <div class="row" v-if="!contributor.canDelete">
        <div class="col-md-4">
          <label class="form-label" for="fonte">[[ contributor.type ]] <span class="required" v-if="isRequired(contributor.type.toLowerCase())">*</span></label>
          <input type="text" class="form-control" v-model="contributor.name" :readonly="!contributor.editable">
        </div>

        <div class="col-md-4">
          <label class="form-label" for="fonte">{{ _('E-mail') }} <span class="required" v-if="isRequired(contributor.type.toLowerCase() + '_email')">*</span></label>
          <input type="email" class="form-control" v-model="contributor.email" :readonly="!contributor.editable">
        </div>

        <div class="col-md-4">
          <label class="form-label" for="fonte">URL</label>
          <input type="text" class="form-control" v-model="contributor.url">
        </div>
      </div>

      <div v-else>
        <div class="row" v-if="contributor.type === ''">
          <div class="col-12">
            <div class="form-group">
              <label for="fonte">{{ _('Select the contributor type') }}</label>
              <select class="form-select"  v-model="contributor.type" id="">
                <option v-for="contributor_type in contributorTypeOptions" :value="contributor_type">[[ contributor_type ]]</option>
              </select>
            </div>
          </div>
        </div>
        <div class="row" v-else>
          <div class="col-md-4">
            <label class="form-label" for="fonte">[[ contributor.type ]]</label>
            <input type="text" class="form-control" v-model="contributor.name">
          </div>

          <div class="col-md-4">
            <label class="form-label" for="fonte">{{ _('E-mail') }}</label>
            <input type="email" class="form-control" v-model="contributor.email">
          </div>

          <div class="col-md-4">
            <label class="form-label" for="fonte">URL</label>
            <div class="row">
              <input type="text" class="form-control col-6" v-model="contributor.url" style="width: 10rem; margin-left: 14px;">
              <button @click="deleteContributor(contributor)" class="btn col-2" type="button"><i class="fa-solid fa-trash"></i></button>
            </div>
          </div>
        </div>
      </div>
  </nav>
  <br>
  <div class="row">
    <div class="col-12">
      <button style="width: 100%;" @click="addContributor" type="button" class="pontilhado-recursos rounded"><p class="text-center" style="margin-top: 15px;"><i class="fa-solid fa-plus"></i>{{ _('Add Contributor') }}</p></button>
    </div>
  </div>
  <br>
  <h2>{{ _('Others Properties') }}</h2>
  <div class="row">
    <div class="col-md-4">
        <label class="form-label" for="field-title">Frequency <span class="required" v-if="isRequired('frequency')">*</span></label>
        <select class="form-select"  v-model="form.frequency" id="">
          <option v-for="frequency in frequencyOptions" :value="frequency.value">[[ frequency.name ]]</option>
        </select>
    </div>
    <div class="col-md-8">
      <label class="form-label" for="codificacaoRecurso">{{ _('Tags') }} <span class="required" v-if="isRequired('tags')">*</span></label>
      <input v-model="form.tags" type="text" class="form-control">
    </div>
  </div>
  <div class="row" v-for="extra in form.extras" style="margin-top: 15px;">
    <div class="col-md-6">
      <label class="form-label" for="">{{ _('Key') }}</label>
      <input v-model="extra.key" type="text" class="form-control">
    </div>
    <div class="col-md-6">
      <div class="row">
        <div class="col-9">
          <label class="form-label" for="">{{ _('Value') }}</label>
          <input v-model="extra.value" type="text" class="form-control">
        </div>
        <div class="col-3">
          <button style="margin-top: 24px;" @click="deleteExtra(extra)" class="btn" type="button"><i class="fa-solid fa-trash"></i></button>
        </div>
      </div>
    </div>
  </div>
  <div class="row" style="margin-top: 15px;">
    <div class="col-12">
      <button style="width: 100%;" @click="addExtra" type="button" class="pontilhado-recursos rounded"><p class="text-center" style="margin-top: 15px;"><i class="fa-solid fa-plus"></i>{{ _('Add Property') }}</p></button>
    </div>
  </div>
  <p style="text-align: right; margin-top: 15px;">
    <button @click="submit" class="btn btn-primary">{{ _('Add Data') }}
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
      </svg>
    </button>
  </p>
</div>
{% endblock %}

{% block form_actions %}
  <div class="form-actions">

  </div>
{% endblock %}
<link rel="stylesheet" href="/datapackage_creator/css/styles.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.13/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="/datapackage_creator/js/package_form.js"></script>

