{{>header}}


  <div class="row-fluid">
    <div class="span12">

      <ul class="nav nav-tabs" id="contentTab">
        <li class="active"><a href="#home">Account</a></li>
        {{#plan.options.cname}}
        <li><a href="#cname">Branding</a></li>
        {{/plan.options.cname}}
        {{#plan.options.api}}
        <li><a href="#apikey">API Key</a></li>
        {{/plan.options.api}}
        {{#colonel}}
        <li><a href="#labs">Labs</a></li>
        {{/colonel}}
      </ul>

      <div class="tab-content">
        <div class="tab-pane active" id="home">
          {{>partial/session_messages}}

          <p><strong>Account type: {{plan.options.name}}</strong></p>
          <div class="well options-box">
            <div class="title">Change Password</div>
          <form action="/account" method="post" class="">
            {{{add_shrimp}}}
            <input type="hidden" name="tabindex" value="account" />
            <fieldset>
              <div class="control-group">
                <label class="control-label" for="custidField">Current Password</label>
                <div class="controls">
                  <input type="password" name="currentp" id="custidField" class="input-xlarge" value="{{form_fields.custid}}" placeholder="" />
                </div>
                <label class="control-label" for="passField">Password</label>
                <div class="controls">
                  <input type="password" name="newp" id="passField" class="input-medium" value="" placeholder="" />
                </div>
                <label class="control-label" for="pass2Field">Confirm Password</label>
                <div class="controls">
                  <input type="password" name="newp2" id="pass2Field" class="input-medium" value="" placeholder="" />
                </div>
              </div>
              <div class="control-group">
                <div class="controls">
                  <button type="submit" class="btn btn-inverse cufon">Save Password</button>
                </div>
              </div>
            </fieldset>
          </form>
          </div>

          <p class="lighter"><em>Created <strong>{{cust.secrets_created}}</strong> secrets since <strong>{{customer_since}}</strong>.</em></p>

          {{#contributor}}
          <p class="lighter"><em>You became a <a href="/contributor">contributor</a> on <strong>{{contributor_since}}</strong>.</em></p>
          {{/contributor}}

        </div>

        {{#plan.options.api}}
        <div class="tab-pane" id="apikey">

          <h2 for="custid">Your API key:</h2>

          {{>partial/session_messages}}

          <form action="/account/apikey" method="post">
            {{{add_shrimp}}}
            <input type="hidden" name="tabindex" value="apikey" />
            {{#cust.apitoken}}
            <div>
              <pre class="hilite">{{#cust.apitoken}}{{cust.apitoken}}{{/cust.apitoken}}</pre>
              <p class="smaller lighter">DO NOT SHARE YOUR KEY. When in doubt, generate a new one.</p>
            </div>
            <button class="btn btn-inverse cufon" type="submit">Regenerate Key</button>
            {{/cust.apitoken}}
            {{^cust.apitoken}}
            <button class="btn btn-inverse cufon" type="submit">Generate Key</button>
            {{/cust.apitoken}}
          </form>
          <hr/>
        </div>
        {{/plan.options.api}}

        {{#plan.options.cname}}
        <div class="tab-pane" id="cname">
          {{>partial/session_messages}}
          <hr/>

          <form action="/account/subdomain" method="post">
            {{{add_shrimp}}}
            <input type="hidden" name="tabindex" value="cname" />

            <strong><label for="cnameField"></label>
            <input type="text" name="cname" id="cnameField" class="short" value="{{cname}}" />.onetimesecret.com</strong> {{#has_cname}}(<a href="{{cname_uri}}" class="smaller lighter">Link</a>){{/has_cname}}<br/>
            <hr/>
            <label for="companyField">Company:</label>
            <input type="text" name="company" id="companyField" class="long" value="{{cust_subdomain.company}}" /><br/>

            <label for="homepageField">Homepage:</label>
            <input type="text" name="homepage" id="homepageField" class="long" value="{{cust_subdomain.homepage}}" /><br/>

            <label for="contactField">Contact Name:</label>
            <input type="text" name="contact" id="contactField" class="long" value="{{cust_subdomain.contact}}" /><br/>

            <label for="emailField">Contact Email:</label>
            <input type="text" name="email" id="emailField" class="long" value="{{cust_subdomain.email}}" /><br/>
            <div class="smaller lighter">Emails are sent from this address. If you have problems, let us know.</div>

            <label for="logoURLField">Logo URL:</label>
            <input type="text" name="logo_uri" id="logoURLField" class="long" value="{{cust_subdomain.logo_uri}}" /><br/>

            <label for="colorPrimaryField">Primary color:</label>
            <input type="text" name="cp" id="colorPrimaryField" class="short" value="{{cust_subdomain.primary_color}}" /><br/>

            <label for="colorSecondaryField">Secondary color:</label>
            <input type="text" name="cs" id="colorSecondaryField" class="short" value="{{cust_subdomain.secondary_color}}" /><br/>

            <label for="colorBorderField">Border color:</label>
            <input type="text" name="cb" id="colorBorderField" class="short" value="{{cust_subdomain.border_color}}" /><br/>

            <span id="fireSmall" class="button"><button type="submit">Update Branding</button></span>
          </form>

        </div>
        {{/plan.options.cname}}

        {{#colonel}}
        <div class="tab-pane" id="labs">

          <em class="msg">These features are experimental.</em>

          <h2 class="intro">Password Generator </h2>
          <p><a href="" id="generatedBookmarklet">OTPassGen</a> &lt;-- drag to toolbar</p>
          <!--<p>Password formula: unique token + host + master password</p>-->
          <form action="/account/passgen" method="post">
            {{{add_shrimp}}}
            <input type="hidden" name="tabindex" value="labs" />
            <p>
              Your unique token:<br/>
              <input id="uniqueToken" name="passgen_token" value="{{token}}" class="selectable" size="60" /><br/>
              <span class="lighter smaller">(Hint: you can change it to anything you like)</span>
            </p>
            <span id="fireSmall" class="button"><button type="submit">Update Token</button></span>
          </form>
          <p class="smaller">Careful: make a note of your unique token.</p>
          <script type="text/javascript" src="/js/passgen-template.js"></script>
          <script type="text/javascript">
            function updateBookmarklet(token) {
              var template = '(' + passgenTemplate.toString() + ')();'
              var jscontent = Mustache.to_html(template, {CHANGEMECHANGEME: token})
              var packer = new Packer;
              var bookmarklet = encodeURI(packer.pack(jscontent, false));
              $('#generatedBookmarklet').attr('href', 'javascript:/*v0.3*/' + bookmarklet)
            }
            //$('#uniqueToken').change(function() {
            //  updateBookmarklet($('#uniqueToken').val());
            //});
            //updateBookmarklet($('#uniqueToken').val());
          </script>

          <h3>Try it !</h3>

          <ol>
            <li>Drag the link above to your toolbar</li>
            <li>Click on the input box below</li>
            <li>Click the bookmarklet</li>
            <li>Enter a Master Password (can be anything)</li>
            <li>Hit enter or click "Generate"</li>
          </ol>
          <p><input id="" type="password" class="long" /></p>


        </div>
        {{/colonel}}

      </div>

    </div>
  </div>


{{>footer}}