{% extends "base.html" %}
{% load i18n inline_formset link_to_window %}

{% block content %}
<p class="text-center">
    <a href="{% url 'current_imports' %}">{% trans "Back to import list" %}</a>
</p>

<nav class="row">
    <ul class="col-md-12 justify-content-center nav nav-pills">
      <li class="nav-item">
          <a class="nav-link{% if not all %} active{% endif %}"
              href="{% url 'import_step_by_step' import.pk line_number %}">
              {% trans "Add/modified" %}
          </a>
      </li>
      <li class="nav-item">
          <a class="nav-link{% if all %} active{% endif %}"
             href="{% url 'import_step_by_step_all' import.pk line_number %}">
              {% trans "All lines" %}
          </a>
      </li>
    </ul>
</nav>


<nav class="row">
    <ul class="pagination col-md-6 justify-content-center">
    {% for label, page_number, enabled, imported, changed in page_numbers %}
        <li class="page-item{% if not enabled %} disabled{% endif %}"
            {% if not enabled %} tabindex="-1"{% endif %}>
            <a class="page-link{% if imported or not changed %} imported-page{% endif %}{% if page_number == line_number_displayed %} current-page{% endif %}"
               {% if imported %}title="{% trans 'Already imported' %}"{% else %}
               {% if not changed %}title="{% trans 'No changes' %}"{% endif %}{% endif %}
               href="{% url import_url import.pk page_number %}">
                {{label}}
            </a>
        </li>
    {% endfor %}
    </ul>
    <div class="col-md-6 justify-content-center">
        <form action="." method="post" name='step-by-step-page'>
            {% csrf_token %}
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">{% trans "Line" %}</span>
                </div>
                <input type="number" class="form-control small-input"
                       name="line-to-go"
                       required="required"/>
                <div class="input-group-append">
                    <button type="submit" name="valid"
                            value="change-page" class="btn btn-secondary">
                        {% trans "Go" %}
                    </button>
                </div>
            </div>
        </form>
    </div>
</nav>


<h2>{% trans "Import step by step" %} &ndash; {{import.name}} &ndash; {% trans "line " %} {{line_number_displayed}}</h2>

{% if line_is_imported %}
<div class="alert alert-warning" role="alert">
    <p>{% trans "This line have been already imported." %}</p>
</div>
{% endif %}

{% if errors %}
<div class="alert alert-danger" role="alert">
    <p>{% trans "The following error(s) has been encountered while parsing the source file:" %}</p>
    <table class="table table-striped">
        <tr>
            <th>{% trans "Column" %}</th>
            <th>{% trans "Error" %}</th>
        </tr>
        {% for line, column, error in errors %}<tr>
            <td>
                {% if column %}
                <a href="#col-{{column}}">
                    <span class="badge badge-info">
                        {% trans "Col."%} {{column}}
                    </span>
                </a>
                {% else %}
                &ndash;
                {% endif %}
            </td>
            <td>{{error}}</td>
        </tr>{% endfor %}
    </table>
</div>

{% if values %}
<form action="." class='step-by-step-csv' method="post" name='step-by-step-csv'>
    {% csrf_token %}
    <table class="table table-striped">
        <tr>
            <th>{% trans "Column number" %}</th>
            <th>{% trans "Name" %}</th>
            <th>{% trans "Raw value" %}</th>
            <th>{% trans "New value" %}</th>
        </tr>
        {% for idx, name, raw in values %}<tr id="col-{{idx}}">
            <td>{{idx}}</td>
            <td>{{name|safe}}</td>
            <td>{{raw}}</td>
            <td><textarea name="col-{{idx}}">{{raw|safe}}</textarea></td>
        </tr>{% endfor %}
    </table>

    <div id="footer">
        <div id="validation-bar" class="row text-center">
            <div class="col-sm">
                <button type="submit" name="valid" id="btn-change-csv"
                        onclick="long_wait();return true;"
                        value="change-csv" class="btn btn-success">
                    {% trans "Update source file" %}
                </button>
            </div>
            <div class="col-sm">
                <a href="{% url 'import_step_by_step' import.pk line_number_displayed %}">
                    <button type="button" class="btn btn-secondary" id="btn-cancel">
                        {% trans "Cancel" %}
                    </button>
                </a>
            </div>
            <div class="col-sm">
                <a href="{% url 'current_imports' %}">
                    <button type="button" class="btn btn-secondary"
                            id="btn-back">
                        {% trans "Back to import list" %}
                    </button>
                </a>
            </div>
        </div>
        {% include 'ishtar/blocks/footer.html' %}
    </div>
</form>
{% endif %}

{% else %}

{% if not have_change and not new_objects %}
<div class="alert alert-success" role="alert">
    <p>{% trans "No change for this item." %}</p>
</div>
{% else %}
<div class="alert alert-warning" role="alert">
    {% if have_change %}
    <p>{% trans "Changes will be made for this item" %}</p>
    {% endif %}
    {% if new_objects %}
    <p>{% trans "New objects will be created." %}</p>
    {% endif %}
</div>
{% endif %}

{% if new_objects %}
<h3>{% trans "Objects to be created" %}</h3>
{% for path, cls, values in new_objects %}
<div class="card">
  <div class="card-body">
    <h5 class="card-title">{{path|safe}} ({{cls.get_verbose_name}})</h5>
  </div>
  <div class="card-body">
    <table class="table table-striped">
        <tr>
            <th>{% trans "Key" %}</th>
            <th>{% trans "Value" %}</th>
        </tr>
        {% for k, value in values.items %}<tr>
            <th>{{k|safe}}</th>
            <td>{{value|safe}}</td>
        </tr>{% endfor %}
    </table>
  </div>
</div>
<hr/>
{% endfor %}
{% endif %}

{% if updated_objects %}

<h3>{% trans "Objects to be updated" %}</h3>
{% for path, obj, values, old_and_updated in updated_objects %}

<div class="card">
    <div class="card-body">
        <h5 class="card-title">{{path}} &ndash; {{obj}} {{obj|link_to_window}} ({{obj.get_verbose_name}})</h5>
    </div>
    <div class="card-body">

        <h5>{% trans "Matching values" %}</h5>
        <table class="table table-striped">
            <tr>
                <th>{% trans "Key" %}</th>
                <th>{% trans "Value" %}</th>
            </tr>
            {% for k, value in values.items %}<tr>
                <th>{{k|safe}}</th>
                <td>{{value}}</td>
            </tr>{% endfor %}
        </table>

        <h5>{% trans "Updated values" %}</h5>
        <table class="table table-striped">
            <tr>
                <th>{% trans "Key" %}</th>
                <th>{% trans "Old value" %}</th>
                <th>{% trans "New value" %}</th>
                <th>{% trans "Changed" %}</th>
            </tr>
            {% for k, value in old_and_updated.items %}<tr>
                <th>{{k|safe}}</th>
                <td>{{value.0|safe}}</td>
                <td>{{value.1|safe}}</td>
                <td class="text-center">{% if value.2%}
                    <i class="fa fa-check-circle-o text-info text-large"
                       aria-hidden="true"></i>{% else %}&ndash;{% endif %}</td>
            </tr>{% endfor %}
        </table>
    </div>
</div>

<hr/>
{% endfor %}
{% endif %}

{% if matched_objects %}
<h3>{% trans "Objects matched with no changes" %}</h3>
{% for path, obj, values in matched_objects %}

<div class="card">
    <div class="card-body">
        <h5 class="card-title">{{path}} &ndash; {{obj}} {{obj|link_to_window}} ({{obj.get_verbose_name}})</h5>
    </div>
    <div class="card-body">

        <h5>{% trans "Matching values" %}</h5>
        <table class="table table-striped">
            <tr>
                <th>{% trans "Key" %}</th>
                <th>{% trans "Value" %}</th>
            </tr>
            {% for k, value in values.items %}<tr>
            <th>{{k|safe}}</th>
            <td>{{value}}</td>
        </tr>{% endfor %}
        </table>
    </div>
</div>

<hr/>
{% endfor %}

{% endif %}



<h3>{% trans "Source file" %}</h3>

<form action="." class='step-by-step-csv' method="post" name='step-by-step-csv'>
    {% csrf_token %}
    <table class="table table-striped">
        <tr>
            <th>{% trans "Column number" %}</th>
            <th>{% trans "Name" %}</th>
            <th>{% trans "Raw value" %}</th>
            <th>{% trans "Interpreted value" %}</th>
            <th>{% trans "New value" %}</th>
        </tr>
        {% for idx, name, raw, interpreted in values %}<tr id="col-{{idx}}">
            <td>{{idx}}</td>
            <td>{{name|safe}}</td>
            <td>{{raw}}</td>
            <td>{{interpreted|safe}}</td>
            <td><textarea name="col-{{idx}}">{{raw}}</textarea></td>
        </tr>{% endfor %}
    </table>

    <div id="footer">
        <div id="validation-bar" class="row text-center">
            <div class="col-sm">
                <button type="submit" name="valid" id="btn-change-csv"
                        value="change-csv" class="btn btn-success"
                        onclick="long_wait();return true;"
                        disabled="disabled">
                    {% trans "Update source file" %}
                </button>
            </div>
            <div class="col-sm">
                <button type="submit" name="valid" id="btn-import"
                        onclick="long_wait();return true;"
                        value="import" class="btn btn-success">
                    {% trans "Import this line" %}
                </button>
            </div>
            <div class="col-sm">
                <a href="{% url 'import_step_by_step' import.pk line_number_displayed %}">
                    <button type="button" class="btn btn-secondary"
                        disabled="disabled" id="btn-cancel">
                        {% trans "Cancel" %}
                    </button>
                </a>
            </div>
            <div class="col-sm">
                <a href="{% url 'current_imports' %}">
                    <button type="button" class="btn btn-secondary"
                            id="btn-back">
                        {% trans "Back to import list" %}
                    </button>
                </a>
            </div>
        </div>
        {% include 'ishtar/blocks/footer.html' %}
    </div>

</form>
<script type="text/javascript">
    var modified = false;
    var no_modif_msg = "{% trans "No modification made to the source file" %}";
    var modif_msg = "{% trans "Modification to the source file have been made. Save or cancel theses modification before import." %}";

    var no_modif_made = function(){
        $("#btn-cancel").prop("title", no_modif_msg);
        $("#btn-change-csv").prop("title", no_modif_msg);
    };
    var modif_made = function(){
        if (modified) return;
        modified = true;
        $("#btn-cancel").prop("title", '');
        $("#btn-cancel").prop("disabled", false);
        $("#btn-change-csv").prop("title", '');
        $("#btn-change-csv").prop("disabled", false);
        $("#btn-import").prop("title", modif_msg);
        $("#btn-import").prop("disabled", true);
        $("#btn-back").prop("title", modif_msg);
        $("#btn-back").prop("disabled", true);
    };
    $(function(){
        $('textarea').bind('input propertychange', function() {
            modif_made();
        });
        no_modif_made();
    });
</script>
{% endif %}

{% endblock %}

{% block footer %}
{% endblock %}