{% 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 %}

<!-- Plans -->
<section id="plans" {% if request.user.is_authenticated %} data- {% endif %}>
    <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>{% site_name %} Pricing Plans</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">
                        <input
                            type="radio"
                            name="period"
                            value="monthly"
                            autocomplete="off"> Monthly
                    </label>
                    <label class="btn btn-default active">
                        <input
                            type="radio"
                            name="period"
                            value="annual"
                            checked
                            autocomplete="off"> Annual
                    </label>
                </div>
                <p id="annual-note">(20% off on annual plan)</p>
            </div>
        </div>

        <!-- Free -->
        <div class="col-sm-4 text-center">
            <div class="panel panel-default">
                <div class="panel-body text-center free">
                    <h1>Hobbyist</h1>
                    <h2>$0<span class="mo">/mo</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">3 Team Members</li>
                    <li class="list-group-item">100 log entries per check</li>
                    <li class="list-group-item">&nbsp;</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 btn-lg btn-success">Get Started</a>
                </div>
                {% endif %}
            </div>
        </div>
        <!-- /item -->

        <!-- P5 -->
        <div class="col-sm-4 text-center">
            <div class="panel panel-default">
                <div class="panel-body text-center">
                    <h1>Business</h1>
                    <h2>
                        <span id="s-price">$16</span><span class="mo">/mo</span>
                    </h2>
                </div>

                <ul class="list-group text-center">
                    <li class="list-group-item">100 Checks</li>
                    <li class="list-group-item">10 Team Members</li>
                    <li class="list-group-item">1000 log entries per check</li>
                    <li class="list-group-item">50 SMS alerts per month</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 btn-lg btn-primary">
                        Get Started
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
        <!-- /item -->

        <!-- P50 -->
        <div class="col-sm-4 text-center">
            <div class="panel panel-default">
                <div class="panel-body text-center">
                    <h1>Business Plus</h1>
                    <h2>
                        <span id="p-price">$64</span><span class="mo">/mo</span>
                    </h2>
                </div>

                <ul class="list-group text-center">
                    <li class="list-group-item">1000 Checks</li>
                    <li class="list-group-item">Unlimited Team Members</li>
                    <li class="list-group-item">1000 log entries per check</li>
                    <li class="list-group-item">500 SMS alerts per month</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 btn-lg btn-primary">
                        Get Started
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
        <!-- /item -->
    </div>
</section>
<!-- /Plans -->

<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 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 "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>
                <p>
                    Each plan has a specific team size limit. When you reach
                    the limit, you cannot invite more team members.
                </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
                    are culled. 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>

{% 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 %}