<h1 class="app-main-title">{{ translate('Contacts') }} > {{ translate('Import') }}</h1>

{% if viewParams.importFinished %}
  {% if viewParams.checkImport %}
    <div class="card">
      <div class="card-header">{{ translate("Test of import, see log below") }}</div>
      <div class="card-body">
        <div class="alert alert-info">
          {{ translate("This was only check of the import. Check the log and if you are satisfied, upload the CSV file again run the import now.") }}<br/>
          <br/>
          <form action="" method="post" enctype="multipart/form-data">
            <div class="mb-2">{{ translate("File:") }} <input type="file" name="contactsFile" accept=".csv,.txt"></div>
            <div class="mb-2">{{ translate("Tag:") }} <input type="input" name="tag" value="{{ viewParams.tag }}"></div>
            <button type="submit" class="btn btn-primary">
              <span class="icon"><i class="fas fa-file-import"></i></span>
              <span class="text">{{ translate('Run import') }}</span>
            </button>
          </form>
        </div>
        <pre class="p-2 bg-slate-800">{{ viewParams.log|join("\n") }}</pre>
      </div>
    </div>
  {% else %}
    <div class="card">
      <div class="card-header">{{ translate("Import finished, see log below") }}</div>
      <div class="card-body">
        <pre>{{ viewParams.log|join("\n") }}</pre>
      </div>
    </div>
  {% endif %}
{% else %}

  <div class="card">
    <div class="card-header">{{ translate("Step 1: Prepare list of contacts") }}</div>
    <div class="card-body">
      {{ translate("Contacts can be imported from a ") }}<i>.csv</i>{{ translate(" or ") }}<i>.txt</i>{{ translate(" file. The file for import must comply with following rules") }}:<br/>
      <ul class="list-disc">
        <li class="ml-8">{{ translate("The file can contain unlimited number of lines.") }}</li>
        <li class="ml-8">{{ translate("Values in file must be separated by semicolon") }} (;).</li>
        <li class="ml-8">{{ translate("First line of the file must be the header containig names of the columns.")}}</li>
        <li class="ml-8">{{ translate("Following lines contain ") }}<b>{{ translate("persons") }}</b>.</li>
        <li class="ml-8">{{ translate("First 3 columns must be ") }}<i>{{ translate("First name") }}</i>, <i>{{ translate("Middle name") }}</i>{{ translate(" and ") }}<i>{{ translate("Last name") }}</i>{{ translate(" of the person") }}.</li>
        <li class="ml-8">{{ translate("Following columns contain contact information. Each column represents one contact information.") }}</li>
        <li class="ml-8">{{ translate("Each person can contain any number of contact information.") }}</li>
        <li class="ml-8">{{ translate("The import automatically detects ") }}<i>{{ translate("emails") }}</i>, <i>{{ translate("phone numbers") }}</i>{{ translate(" and ") }}<i>{{ translate("links") }}</i>.</li>
      </ul>
      <p>
        {{ translate("Example CSV file") }}:
        <pre class="text-blue-800 border p-1 border-blue-800">First name;Middle name;Last name;Email 1;Email 2;Phone 1;Phone 2;Link 1;Link 2
John;;Smith;john.smith@example.com;;+1 425 985 4523 74;+1 7748 56 22 133;;
Barbara;Juplen;Greaves;bbaar@example.com;greavebar@example.com;;;;
</pre>
        <br/>
        {{ translate("You may also") }}
        <a href="export" class="btn btn-small btn-primary-outline">
          <span class="icon"><i class="fas fa-file-export"></i></span>
          <span class="text">{{ translate("Export your addressbook") }}</span>
        </a>,
        {{ translate("modify it and re-import again") }}.
      </p>
    </div>
  </div>

  <form action="" method="post" enctype="multipart/form-data">
    <input type="hidden" name="checkImport" value="1">
    <div class="card mt-2">
      <div class="card-header">{{ translate("Step 2: Upload the file with contacts") }}</div>
      <div class="card-body">
        <input type="file" name="contactsFile" accept=".csv,.txt">
      </div>
    </div>

    <div class="card mt-2">
      <div class="card-header">{{ translate("Step 3: Give a tag to new imported contacts") }}</div>
      <div class="card-body">
        <input type="input" name="tag" placeholder="Tag...">
      </div>
    </div>

    <div class="card mt-2">
      <div class="card-header">{{ translate("Step 4: Check the import") }}</div>
      <div class="card-body">
        <button type="submit" class="btn btn-primary">
          <span class="icon"><i class="fas fa-file-import"></i></span>
          <span class="text">{{ translate('Check the import now') }}</span>
        </button>
      </div>
    </div>
  </form>

  <div class="card mt-2">
    <div class="card-header">{{ translate("Step 5: Run the import") }}</div>
    <div class="card-body">
      {{ translate("You will be able to run the import after its check") }}.
    </div>
  </div>
{% endif %}