{% extends "zerver/portico.html" %}
{% load compressed %}
{% load minified_js %}

{% block customhead %}
    {% compressed_css 'portico' %}
    {% minified_js 'landing-page' %}
{% endblock %}

{% block portico_content %}
    <div class="signup-header">
      <h1>Sign up now!</h1>
      <h4>Zulip is currently in closed beta,<br />
          but we're constantly
          adding new beta customer sites.
      </h4>
    </div>

    <div class="signup-envelope-area">
      <div id="success" class="alert alert-hidden alert-success alert-block">
        <h4>Success!</h4>
        Thank you for your interest. We'll be in touch soon.
        While you wait, check out some of our <a href="/features">features</a>!
      </div>

      <div id="group-already-uses-zulip" class="alert alert-hidden alert-success alert-block">
        <p>Good news: your group already uses Zulip! We've sent you an
          email with the steps to complete your registration.</p>

        <p>(If you want to create a new group instead of joining this one,
          please contact <a href="mailto:support@zulip.com">support@zulip.com</a> and we'll
          get you set up)</p>
      </div>

      <div id="error" class="alert alert-hidden alert-error alert-block">
        <h4>Ruh-roh!</h4>
        Hmmm, something went wrong. Please send email to <a href="mailto:support@zulip.com">support@zulip.com</a>.
      </div>

      <div id="error-missing-email" class="alert alert-hidden alert-error alert-block">
        <h4>Your email is required!</h4>
        How else would we be able to reach you?
      </div>

      <div class="postal-envelope">
        <div class="paravion"></div>
        <div class="stamp">
          <div class="date">{% now "b d" %}<br />{% now "Y" %}</div>
        </div>
        <form method="post" class="letter-form" id="beta-user-form" action="{% url 'beta-signup-submission' %}">
          {% csrf_token %}
          <p>&nbsp;</p>
          <p>Hello Zukeepers,</p>

          <p>My name is <input class="input-medium" type="text"
          id="name" name="name" placeholder="Wolfgang A. Mozart" /><span class="punc">,</span> and
          you can email me at <input class="input-large" type="email"
          id="email" name="email"
          placeholder="w.a.mozart@magicflute.com" /><span class="punc">.</span></p>


          <p>I work at <input class="input-large" type="text"
          name="company" id="company" placeholder="Salzburg Court" /><span class="punc">,</span>
          and I wanted to try Zulip. <span class="signup-section">There are
          about <input class="input-mini" type="text" id="count"
          name="count" placeholder="10" /> of us, and today we use
          <input class="input-medium" type="text" id="product"
          name="product" placeholder="IRC" /> to chat.</span></p>

          <div class="signup-signature">
             <p>I'm looking forward to it!</p>
             <button type="submit" id="beta-signup" class="btn btn-large btn-primary">Sign up</button>
          </div>
        </form>
      </div>
    </div>
    <div class="signup-page-bottom">
      Does your company already use Zulip? <a href="{% url 'register' %}">Register your account here</a>.
    </div>
{% endblock %}