{% extends "base.html" %}
{% load static compress hc_extras %}

{% block title %}Pricing - It's Free! - {{ site_name }}{% endblock %}

{% block description %}
    <meta name="description" content="With the Free plan, you can monitor up to 20 services for free. Paid plans lift the limits significantly and are reasonably priced. Special offer for open source projects.">
{% endblock %}

{% block keywords %}
    <meta name="keywords" content="healthchecks, cronitor alternative, dead man's snitch alternative, monitor cron jobs free, free cron monitoring, free cron job, free health checks">
{% endblock %}

{% block content %}
<section id="plans">
    <div class="container">
        {% if request.user.is_authenticated %}
        <div class="row">
            <div class="col-md-12">
                <div id="subscription-status" class="jumbotron">
                    <p>
                        {% if sub.plan_id %}
                            Your account is currently on the
                            <strong>{{ sub.plan_name }}</strong>
                            plan. Thank you for supporting {{ site_name }}!
                        {% else %}
                            Your account is currently on the
                            <strong>{{ sub.plan_name|default:"Hobbyist" }}</strong> plan.
                        {% endif  %}
                    </p>
                    <p>
                        {% if sub.plan_id %}
                        <a class="btn btn-default" href="{% url 'hc-billing' %}">Billing Details</a>
                        {% else %}
                        <a class="btn btn-default" href="{% url 'hc-billing' %}">Billing Details and Plan Upgrades</a>
                        {% endif %}
                    </p>
                </div>
            </div>
        </div>
        {% else %}
        <div class="row">
            <div class="col-sm-12 text-center">
                <h1 id="pricing-tagline">Monitor 20 Cron Jobs for Free. Affordable Plans When You Need More.</h1>
            </div>
        </div>
        {% endif %}

        <div class="row">
            <div class="col-sm-12" id="period-controls">
                <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-default active">
                        <input
                            type="radio"
                            name="period"
                            value="monthly"
                            checked
                            autocomplete="off"> Monthly
                    </label>
                    <label class="btn btn-default">
                        <input
                            type="radio"
                            name="period"
                            value="annual"
                            autocomplete="off"> Annual
                    </label>
                </div>
                <p id="annual-note">(20% off on annual plan)</p>
            </div>
        </div>

        <div class="row">
            <!-- Hobbyist -->
            <div class="col-sm-6 col-md-3 text-center">
                <div class="panel panel-default plan hobbyist">
                    <div class="panel-body text-center">
                        <h1>Hobbyist</h1>
                        <h2>$0 <span class="mo">/ month</span></h2>
                    </div>
                    <ul class="list-group text-center">
                        <li class="list-group-item"><i class="fa fa-check"></i> 20 checks</li>
                        <li class="list-group-item">
                            <span data-help="team-size-help">3 team members</span>
                        </li>
                        <li class="list-group-item">
                            <span data-help="log-limit-help">100 log entries per check</span>
                        </li>
                        <li class="list-group-item">API access</li>
                        <li class="list-group-item">
                            <span data-help="sms-help">5 SMS, WhatsApp and call credits</span>
                        </li>
                        <li class="list-group-item">&nbsp;</li>
                    </ul>

                    {% if not request.user.is_authenticated %}
                    <div class="panel-footer">
                        <a href="#" data-toggle="modal" data-target="#signup-modal" class="btn">Sign Up</a>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Supporter -->
            <div class="col-sm-6 col-md-3 text-center">
                <div class="panel panel-default plan supporter">
                    <div class="panel-body text-center free">
                        <h1>Supporter</h1>
                        <h2>
                            <span id="supporter-price">$5</span>
                            <span class="mo">/ month</span>
                        </h2>
                    </div>
                    <ul class="list-group text-center">
                        <li class="list-group-item"><i class="fa fa-check"></i> 20 checks</li>
                        <li class="list-group-item">
                            <span data-help="team-size-help">3 team members</span>
                        </li>
                        <li class="list-group-item">
                            <span data-help="log-limit-help">1000 log entries per check</span>
                        </li>
                        <li class="list-group-item">API access</li>
                        <li class="list-group-item">
                            <span data-help="sms-help">5 SMS, WhatsApp and call credits</span>
                        </li>
                        <li class="list-group-item">Email support</li>
                    </ul>

                    {% if not request.user.is_authenticated %}
                    <div class="panel-footer">
                        <a href="#" data-toggle="modal" data-target="#signup-modal" class="btn">
                            Sign Up
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Business -->
            <div class="col-sm-6 col-md-3 text-center">
                <div class="panel panel-default plan business">
                    <div class="panel-body text-center">
                        <h1>Business</h1>
                        <h2>
                            <span id="business-price">$20</span>
                            <span class="mo">/ month</span>
                        </h2>
                    </div>

                    <ul class="list-group text-center">
                        <li class="list-group-item">100 checks</li>
                        <li class="list-group-item">
                            <span data-help="team-size-help">10 team members</span>
                        </li>
                        <li class="list-group-item">
                            <span data-help="log-limit-help">1000 log entries per check</span>
                        </li>
                        <li class="list-group-item">API access</li>
                        <li class="list-group-item">
                            <span data-help="sms-help">50 SMS, WhatsApp and call credits</span>
                        </li>
                        <li class="list-group-item">Email support</li>
                    </ul>

                    {% if not request.user.is_authenticated %}
                    <div class="panel-footer">
                        <a href="#" data-toggle="modal" data-target="#signup-modal" class="btn">
                            Sign Up
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Business Plus -->
            <div class="col-sm-6 col-md-3 text-center">
                <div class="panel panel-default plan business-plus">
                    <div class="panel-body text-center">
                        <h1>Business Plus</h1>
                        <h2>
                            <span id="business-plus-price">$80</span>
                            <span class="mo">/ month</span>
                        </h2>
                    </div>

                    <ul class="list-group text-center">
                        <li class="list-group-item">1000 checks</li>
                        <li class="list-group-item">
                            <span data-help="team-size-help">Unlimited team members</span>
                        </li>
                        <li class="list-group-item">
                            <span data-help="log-limit-help">1000 log entries per check</span>
                        </li>
                        <li class="list-group-item">API access</li>
                        <li class="list-group-item">
                            <span data-help="sms-help">500 SMS, WhatsApp and call credits</span>
                        </li>
                        <li class="list-group-item">Priority email support</li>
                    </ul>

                    {% if not request.user.is_authenticated %}
                    <div class="panel-footer">
                        <a href="#" data-toggle="modal" data-target="#signup-modal" class="btn">
                            Sign Up
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>

<section id="faq">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <h1>Billing Questions</h1>
                <h2>What payment methods do you accept?</h2>
                <p>
                    We accept Visa, Master Card, American Express and PayPal.
                </p>

                <h2>Will my credit card data be safe?</h2>
                <p>
                    We process payments using
                    <a href="https://braintreepayments.com">Braintree</a>,
                    a division of PayPal. Your credit card or PayPal
                    credentials are never directly handled by or
                    stored on {{ site_name }} servers.
                </p>
                <p>
                    Braintree is a validated Level 1 PCI DSS Compliant
                    Service Provider, it is on Visa's Global Compliant
                    Provider List and MasterCard's SDP List.
                    <a href="https://www.braintreepayments.com/products-and-features/data-security">Read more…</a>
                </p>

                <h2>If I cancel my paid plan, do I get a refund?</h2>
                <p>
                    You can easily cancel your subscription at any time, but
                    no refunds are provided for prorated periods.
                </p>
            </div>
            <div class="col-sm-6">
                <h1>Premium Features</h1>
                <h2>What's the difference between "Hobbyist" and "Supporter" plans?</h2>

                <p>
                    Both plans are similar. The "Supporter" plan is offered
                    in case "Hobbyist" fits your usage but you wish
                    to support {{ site_name }} financially.
                </p>


                <h2>What's "3 / 10 / Unlimited Team Members"?</h2>

                <p>
                    Invite your colleagues
                    to your account so they can access your checks,
                    logs, and configured integrations. Inviting team members
                    is <strong>more convenient and more secure</strong>
                    than sharing a single login and password.
                </p>

                <h2>What is the "log entries per check" number?</h2>
                <p>
                    For each of your checks, {{ site_name }} keeps a
                    historic log of the received pings. The log can be useful
                    for auditing past activity of your cron jobs.
                </p>
                <p>
                    There is a per-check limit of how many log entries are
                    kept. When this limit is reached, the oldest log entries
                    start getting removed to make room for new ones.
                    You can increase the limit by upgrading to paid plans.
                </p>

                <h2>When is 100 log entries per check sufficient?</h2>
                <p>
                    It depends on how frequently your cron job runs and
                    for what time period you want to keep a log of received
                    pings. For example, if your cron job runs once a week,
                    then the 100 log entries will cover 2 years. On the other
                    hand, if the cron job runs every 5 minutes, then the 100
                    log entries will only cover 8 hours.
                </p>


            </div>
        </div>
    </div>
</section>

<div id="team-size-help" class="hidden">
    Invite your colleagues to your projects so they can access your checks, logs,
    and configured integrations. A higher limit lets you invite more people.
</div>

<div id="log-limit-help" class="hidden">
    The maximum number of log entries {{ site_name }} will store for each check.
    When the limit is reached, the oldest log entries start getting removed to make
    room for new ones.
</div>

<div id="sms-help" class="hidden">
    <p>The maximum number of SMS, WhatsApp and phone call notifications per month.</p>

    <p>The limit is applied to the combined number of sent SMS, WhatsApp and phone
    call notifications. </p>
</div>

{% if not request.user.is_authenticated %}
{% include "front/signup_modal.html" %}
{% endif %}
{% endblock %}

{% block scripts %}
{% compress js %}
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/pricing.js' %}"></script>
<script src="{% static 'js/signup.js' %}"></script>
{% endcompress %}
{% endblock %}