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

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

{% block inner_content %}
<div class="row-fluid shaded-background landing-page">
  <div class="content">
    <div class="span12 main-headline">
      <h1>Sign up now!</h1>
      <h4>Zulip is currently in closed beta, but we're constantly
        adding new beta customer sites.</h4>
    </div>
  </div>
</div>

<div class="row-fluid shaded-background landing-page-bottom">
  <div class="content">
    <div class="span6 offset3" id="envelope-holder">
      <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="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="postal-stripes"></div>
        <div class="stamp pull-right">
          <div class="date">{% now "b j" %}<br />{% now "Y" %}</div>
        </div>
        <span class="par-avion">PAR COURRIER ELECTRONIQUE</span>
        <form method="post" class="letter-form" id="beta-user-form" action="{% url 'beta-signup-submission' %}">
          {% csrf_token %}
          <p>&nbsp;</p>
          <p>Hi Zulips,</p>

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


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

          <p>I'm looking forward to it!</p>

          <button type="submit" id="beta-signup" class="btn btn-large btn-info">Sign up</button>
        </form>
        <div class="postal-stripes"></div>
      </div>
    </div>
  </div>
</div>

<div class="row-fluid shaded-background landing-page-bottom">
  <div class="content">
    <div class="span6 offset3 muted">
      Does your company already use Zulip? <a href="{% url 'register' %}">Register your account here</a>.
  </div>
  </div>
</div>
{% endblock %}