{% extends "base.html" %}
{% load i18n bootstrap %}
{% block content %}
<div class="row">
    <div class="col-sm-5 section-card-form">
        <form class="register-card-form" autocomplete="off">
            {% csrf_token %}
            <h3>{% trans "Card and membership" %}</h3>
            <p>
                Enter card and phone number to register a new membership or add card to an existing user.
                <a tabindex="0" role="button" data-toggle="popover" title="{% trans "Card and membership" %}" data-content="<ul>
                    <li>If an existing user is found <em>without</em> a valid membership, the membership is <strong>renewed</strong></li>
                    <li>Registering a card number with a phone number already tied to an existing user, will add the card to that user.</li>
                    </ul>">
                    <i class="glyphicon glyphicon-info-sign"></i>
                </a>
            </p>
            {{ add_card_form|bootstrap }}
            <div class="register-card-form--selected-user-section">
                <label>{% trans "Member" %}</label>
                <div class="register-card-form--selected-entity-wrap"></div>
            </div>

            <button id="register-submit-btn" type="submit" class="btn btn-primary btn-lg" disabled>{% trans "Register card" %}</button>
            <button type="reset" class="register-reset-btn btn btn-default">{% trans "Reset" %}</button>
{# FIXME(nikolark): 2020-01-05 keeping yolo changes from server #}
{#            {% if show_trial_membership %}#}
                <br><br><input type="checkbox" class="" id="id_membership_trial" name="membership_trial" value="volunteer"><label for="id_membership_trial" title="{% trans "Expires January 1. next year" %}">{% trans "Trial membership" %}</label>
{#            {% endif %}#}
            <br><br>

            <button id="membership-submit-btn" type="submit" class="btn btn-default" disabled>{% trans "Renew membership only" %}</button>
            <a tabindex="0" role="button" data-toggle="popover" title="{% trans "Renew membership only" %}" data-content=" <ul>
                <li>If an existing user with card is found, you can renew the membership only (up to 30 days before expiry).</li>
            </ul>">
                <i class="glyphicon glyphicon-info-sign"></i>
            </a>
        </form>
    </div>
    <div class="col-sm-7 section-search">
        <h3>{% trans "Search members" %}</h3>
        <form class="form-inline query-form" autocomplete="off">
            {{ search_user_form|bootstrap_inline }}
            <button type="reset" class="btn btn-default search-reset-btn">Reset</button>
        </form>
        <div class="results-wrap"></div>
    </div>
</div>
{% endblock %}