{% extends "members:base.html" %}

{% load i18n %}
{% load static %}
{% block content %}
<div>
    <div>
        <h3>{% trans "Add many members" %}</h3>
    </div>

    <div>
        <p>
            {% blocktrans %}
            Enter member information in CSV format, separate members on separate lines. 
            If a new member already exists in the database, a new payment event will be created for that member instead.
            {% endblocktrans %}
        </p>
    </div>

    <div>
        <label>{% trans "Format the member table like this:" %}</label>
        <div>
            <img src="{% static "members/img/excel_csv_save_example.png" %}">                
        </div>
        <p>{% blocktrans %}Columns: First name, last name, email address, place of origin, AYY member, JAS recipient{% endblocktrans %}</p>
    </div>
    <div>
        <label>{% trans "Save the file as CSV" %}</label>
        <div><img src="{% static "members/img/excel_csv_save_tutorial.png" %}"></div>
    </div>
    
    <form name="memberTextForm" action="/members/import_csv" enctype="multipart/form-data" method="POST">{% csrf_token %}
        <h3>{% trans "Upload file" %}</h3>
        <input class="form-control-file" type="file" accept=".csv" name="csvFile" />                

        <div class="form-group">
            <label>{% trans "Payment source" %}</label>
            <select name="payment_source" class="form-control">
              <option value="AYY">{% trans "AYY" %}</option>
              <option value="bank_transfer">{% trans "Bank transfer" %}</option>
              <option value="cash">{% trans "Cash payment" %}</option>
            </select>
            <small class="form-text text-muted">
                {% trans "This payment source will be used to create any payments for new members that already exist in the database." %}
            </small>            
        </div>
        <div class="form-group">
            <label>{% trans "CSV delimiter" %}</label>
            <input type="text" name="delimiter" class="form-control" value=";" />
            <small class="form-text text-muted">
              {% blocktrans %}The symbol that is used to separate items in one line. Defaults to ';' (semicolon).{% endblocktrans %}
            </small>
        </div>
        <div>
            <button type="submit" class="btn btn-primary">{% trans "Send" %}</button>
        </div>
    </form>
</div>
{% endblock content %}