{% extends 'customer/baseaccountpage.html' %}
{% load static thumbnail loyalty_tags catalogue_tags %}
{% block title %}Account Home {{ block.super }}{% endblock %}
{% block tabcontent %}
    <div class="full-wide bg-grey">
        <div class="container mb-5">
            <div class="row">
                <div class="col-12 text-center mt-5">
                    <h2>Refer your friends. Get Rewarded.</h2>
                    <p>
                        Invite your friends. For each friend that signs up, you get {{ referrer_credit }} store credit!
                    </p>
                </div>
                <div class="col-lg-6 offset-lg-3 mb-5">
                    <h1 class="text-center mb-2 mt-2">{{ referrer.code }}</h1>
                    <div class="input-group mb-3">
                        <input class="form-control" id="ref-link"
                               value="{{ request.scheme }}://{{ request.get_host }}?ref={{ referrer.code }}">
                        <button data-toggle="tooltip"
                                data-placement="bottom"
                                title="Copied!"
                                data-trigger="click"
                                class="btn btn-primary copy-button input-group-addon"
                                data-clipboard-target="#ref-link">
                            <i class="fa fa-copy"></i> Copy Link
                        </button>
                    </div>
                    <div class="row">
                        <div class="col-lg-6 offset-lg-3 text-center">
                            <a target="_blank"
                               href="https://www.facebook.com/sharer.php?u={{ request.scheme }}://{{ request.get_host }}?ref={{ referrer.code }}"
                               class="btn btn-primary text-white btn-sm btn-round">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                            <a target="_blank"
                               href="https://wa.me/?text={{ request.scheme }}://{{ request.get_host }}?ref={{ referrer.code }}"
                               class="btn btn-primary btn-sm btn-round text-white">
                                <i class="fab fa-whatsapp"></i>
                            </a>
                            <a href="{% url 'giftcard:send_to_friends' %}" id="email-friends"
                               class="btn btn-primary btn-sm btn-round text-white">
                                <i class="fa fa-envelope"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-left mb-3 mt-5">
                <h2>ACTIVE SUBSCRIPTIONS</h2>
            </div>
        </div>
        <div class="row">
            {% for subscription in subscriptions %}
                <div class="col-lg-4 col-md-6 mb-3">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            {% if subscription.product.get_product_class.slug == 'coffee-bag' %}
                                <small class="strong">Coffee by the bag</small>
                            {% elif subscription.product.get_product_class.slug == 'coffee-pods' %}
                                <small class="strong">Coffee by the pod</small>
                            {% endif %}
                            <div class="d-block mb-1">
                                <h3 class="mb-0">Your refill will be shipped on</h3>
                                {{ subscription.next_order }}
                            </div>
                            <h2 class="text-primary">{{ subscription.product.get_title }}</h2>
                            <div class="d-block">
                                <i class="fa fa-map-marker-alt text-info"></i> {{ subscription.product|attribute:'country' }}, {{ subscription.product|attribute:'region' }}
                            </div>
                            <div class="d-block mb-3">
                                <small>{{ subscription.product|attribute:'coffee_producer' }}</small>
                            </div>
                            <div class="d-block">
                                <h3 class="mb-1">Will be shipped to</h3>
                                {{ subscription.shipping_address.line1 }}, {{ subscription.shipping_address.line2 }}
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
        <div class="row">
            <div class="col-lg-12 text-center mt-5">
                <a href="{% url 'subscription:coffee_subscriptions' %}" class="btn btn-outline-info btn-lg">See my
                    subscriptions</a>
            </div>
        </div>
    </div>
{% endblock %}

{% block onbodyload %}
    {{ block.super }}
    var clipboard = new ClipboardJS('.copy-button');
{% endblock %}