## The contents of this file are subject to the Common Public Attribution
## License Version 1.0. (the "License"); you may not use this file except in
## compliance with the License. You may obtain a copy of the License at
## http://code.reddit.com/LICENSE. The License is based on the Mozilla Public
## License Version 1.1, but Sections 14 and 15 have been added to cover use of
## software over a computer network and provide for limited attribution for the
## Original Developer. In addition, Exhibit A has been modified to be
## consistent with Exhibit B.
##
## Software distributed under the License is distributed on an "AS IS" basis,
## WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for
## the specific language governing rights and limitations under the License.
##
## The Original Code is reddit.
##
## The Original Developer is the Initial Developer.  The Initial Developer of
## the Original Code is reddit Inc.
##
## All portions of the code written by reddit are Copyright (c) 2006-2013
## reddit Inc. All Rights Reserved.
###############################################################################
<%!
  from r2.lib.strings import strings
  from r2.lib.template_helpers import static
%>
<%namespace file="less.html" import="less_stylesheet"/>
<%namespace file="utils.html" import="classes, _md"/>
<%inherit file="reddit.html"/>

<%def name="stylesheet()">
  ${parent.stylesheet()}
  ${less_stylesheet('goldinfo.less')}
</%def>

<%def name="feature_item(name, img_src, description_md, extra_class='', img_url=None)">
  <section id="${name}" ${classes(extra_class)}>
    %if img_url:
      <a href="${img_url}">
    %endif
        <div class="sample"><img src="${img_src}" alt=""></div>
    %if img_url:
      </a>
    %endif
    <div class="description">
      %if 'new' in extra_class.split():
        <div class="new-mark">${_('New!')}</div>
      %endif
      ${_md(description_md)}
      %if caller:
        ${caller.body()}
      %endif
    </div>
  </section>
</%def>

<%def name="partner_item(name, description_html)">
  <a href="/gold/partners#${name}" target="_blank">
    <div class="label-container"><span class="partner-label">${unsafe(description_html)}</span></div>
    <div class="logo"><img src="${static('gold/partner-%s.png' % name)}" alt="${name}"></div>
  </a>
</%def>

<%def name="goldinfo_header(title, description=None, css_class=None)">
  <header ${classes(css_class)}>
    <img class="insignia" src="${static('gold/gold-insignia-big.png')}" alt="">
    <h1>${title}</h1>
    % if description:
      <p>${description}</p>
    % endif
    <div class="actions">
      <a class="buy-gold-button" href="/gold">${_('buy reddit gold')}</a>&#32;
      <span class="or">${_('or')}</span>
      <a class="postcard-button" href="/gold/about#postcard"><img src="${static('gold/stamp.png')}" alt=""> ${_('send us a postcard')}</a>
    </div>
  </header>
</%def>

<%def name="goldinfo_footer()">
  <footer>
    <h1>${_('become a member today.')}</h1>
    <p>${_('reddit gold is %(gold_month_price)s / month, or %(gold_year_price)s for a year.') % thing.prices}</p>
    <a class="buy-gold-button" href="/gold">${_('buy reddit gold')}</a>
  </footer>
</%def>

<%def name="content()">
  <section id="gold-letter">
    <div class="letter-body">
      <img class="logo" src="${static('gold/reddit-gold-logo.png')}" alt="reddit gold">
      ${_md(
        "reddit gold is our premium membership program. It comes with extra features to make your experience here better as well as special benefits from gold partners for exceptional products and services.\n\n"
        "reddit takes no payment from gold partners for being in this program. We ask that they give all the benefits to you, our users. We hope in turn that this helps make gold a program worth subscribing to.\n\n"
        "If you have questions about any of the benefits, please visit /r/goldbenefits. New benefits and features will also be announced there, and we hope you'll enjoy them."
      )}
      <div class="signature"><img src="${static('gold/letter-signature.png')}" alt="yishan"><a href="/u/yishan" target="_blank">/u/yishan</a></div>
    </div>
  </section>
  <section id="about-gold">
    ${goldinfo_header(_('You can make reddit better.'), css_class='short')}
    ${feature_item('comment-highlighting',
      static('gold/sample-commenthighlighting.png'),
      _(
        '# New comment highlighting.\n'
        "What's new? Highlight which comments are new since the last time you viewed a thread."
      ))}
    ${feature_item('username-notifications',
      static('gold/sample-butler.png'),
      _(
        "# Notifications when you're mentioned in comments.\n"
        """Want to say "boo" when people talk about you?  """
        """Get an orangered whenever someone "/u/" mentions your username in a comment."""
      ), "new")}
    <section id="partner-benefits">
        <h1>${_('Awesome stuff for gold members:')}</h1>
        <ul>
          <li>${partner_item('backblaze', 'data backups<br>(sleep soundly)')}</li>
          <li>${partner_item('uniqlo', 'cool clothes')}</li>
          <li>${partner_item('goldbely', 'special foods from around the country')}</li>
          <li>${partner_item('empiremayo', 'tasty spreads')}</li>
          <li>${partner_item('betabrand', 'unique online fashions')}</li>
          <li>${partner_item('urbilis', 'high-end home gardening')}</li>
          <li>${partner_item('redditgifts', 'reddit bazaar')}</li>
          <li>${partner_item('bartsbakery', 'delicious cookies')}</li>
          <li>${partner_item('outgrowme', 'crowd-funded commodities')}</li>
          <li>${partner_item('uber', 'chauffeur on-demand')}</li>
          <li>${partner_item('ifixit', 'technological rectifications')}</li>
        </ul>
    </section>
    ${feature_item('filter-all',
      static('gold/sample-filterall.png'),
      _(
        "# Filter specific subreddits from /r/all.\n"
        "Are there subreddits you don't want to see? Customize /r/all by removing them with a url like /r/all-operative-badger (up to ~300 removals - limited by maximum url length)."
      ))}
    ${feature_item('more-comments',
      static('gold/sample-morecomments.png'),
      _(
        '# More subreddits and comments per page.\n'
        'Our servers work harder for gold members.  \n'
        'Subscribe to up to 100 subreddits on your front page.  \n'
        'Read comment threads 1500 comments at a time.'
      ))}
    ${feature_item('save-comments',
      static('gold/sample-savecomments.png'),
    _(
        '# Save comments and view by subreddit.\n'
        "Save the great comments you'd like to revisit later.  \n"
        'Filter your favorite posts and comments by subreddit.'
      ))}
    ${feature_item('ads-optional',
      static('gold/sample-adsoptions.png'),
      _(
        '# Turn off ads.\n'
        'Advertisements are optional to gold members.'
      ))}
    ${feature_item('friend-notes',
      static('gold/sample-friends.png'),
      _(
        '# Friends with benefits.\n'
        'Add notes to keep track of them all.'
      ))}
    <section id="other-benefits" class="etc last">
      <h1>Last, but not least:</h1>
      <ul>
        <li><strong>${_('The Lounge.')}</strong>&#32;${_('Access to a super-secret members-only community that may or may not exist.')}</li>
        <li><strong>${_('Beta test new features.')}</strong>&#32;${_('We occasionally invite gold members to try out new features first.')}</li>
        <li><strong>${_('A trophy on your user page.')}</strong>&#32;${_('As thanks for supporting reddit gold.')}</li>
        <li><strong>${_('More to come.')}</strong>&#32;${_("We have many more ideas for gold features, and will add to this list in the future.")}</li>
      </ul>
    </section>
    ${goldinfo_footer()}
  </section>
  <div class="or-box">${_('or')}</div>
  <a class="postcard" href="/about/postcards" target="_blank">
    <section id="postcard">
      ## TRANSLATORS: this string is displayed as the content of a postcard
      ## with pretty typographical formatting.
      ## If you use '|' characters to split the translated string into 5 parts,
      ## the parts will be split onto separate lines with fancy typographic
      ## formatting specific to each line (see the site for an example).
      ## If this fancy formatting isn't a good fit for your language, omit the
      ## '|' characters. The translated string will be displayed in full size
      ## without any typographic effects.
      <% parts = _('send us a postcard | for | 1 free month | of | reddit gold').split('|') %>
      <h1>
        % if len(parts) == 5:
          <strong>${parts[0]}</strong>
          <span class="for">${parts[1]}</span>
          <strong>${parts[2]}</strong>
          <span class="of">&mdash;&mdash;${parts[3]}&mdash;&mdash;</span>
          <span class="gold-typo">${parts[4]}</span>
        % else:
          <strong>${parts[0]}</strong>
        % endif
      </h1>
      <div class="sticker">
        <div>${_('view the postcard gallery')}</div>
      </div>
    </section>
  </a>
</%def>
