extends ../layout
block content
    h2.text-center Commit to yourself. Commit to a nonprofit.
    .row
        .col-xs-12.col-sm-6.col-sm-offset-3
          p You can give yourself external motivation, and immediately start helping nonprofits. You can do this by pledging a monthly donation to a nonprofit until you’ve earned one of our certifications. This pledge is completely optional. This pledge is entirely between you and the nonprofit, and no money goes to freeCodeCamp. You can change your commitment or stop it at any time.

    .row
        .col-xs-12.col-sm-6.col-sm-offset-3.text-center
          h3 Pledge to #{displayName} 
          .button-spacer
              a(href='#{imgUrl}' data-lightbox='img-enlarge' alt='#{imgAlt}')
                  img.img-responsive(src='#{imgUrl}' alt='#{imgAlt}')
              p.large-p
                = description
              p
                a(href='/commit/directory') ...or see other nonprofits
    .spacer
    form.form(name='commit')
        .hidden
            input(type='text' value='#{name}' name='nonprofit')
        .row
            .col-xs-12.col-sm-6.col-sm-offset-3
                h3 Step 1: Which certification do you pledge to complete?
                .btn-group-vertical(data-toggle='buttons' role='group')
                    label.btn.btn-primary.active
                        input(type='radio' id="respWebDesignCert" value="Responsive Web Design Certification" name='goal' checked="checked")
                        | Responsive Web Design
                    label.btn.btn-primary
                        input(type='radio' id="frontEndLibsCert" value="Front End Libraries Certification" name='goal')
                        | Front End Libraries
                    label.btn.btn-primary
                        input(type='radio' id="jsAlgoDataStructCert" value="JavaScript Algorithms and Data Structures Certification" name='goal')
                        | JavaScript Algorithms and Data Structures
                    label.btn.btn-primary
                        input(type='radio' id="dataVisCert" value="Data Visualization Certification" name='goal')
                        | Data Visualization
                    label.btn.btn-primary
                        input(type='radio' id="apisMicroservicesCert" value="APIs and Microservices Certification" name='goal')
                        | APIs and Microservices
                    label.btn.btn-primary
                        input(type='radio' id="infosecQaCert" value="Information Security and Quality Assurance Certification" name='goal')
                        | Information Security and Quality Assurance
        .spacer
        .row
            .col-xs-12.col-sm-6.col-sm-offset-3
                h3 Step 2: How much do you want to pledge monthly until you earn that certification?
                .btn-group.btn-group-justified(data-toggle='buttons' role='group')
                    label.btn.btn-primary
                        input(type='radio' id='5-dollar-pledge' value='5' name='amount')
                        | $5 per month
                    label.btn.btn-primary.active
                        input(type='radio' id='10-dollar-pledge' value='10' name='amount' checked="checked")
                        | $10 per month
                    label.btn.btn-primary
                        input(type='radio' id='25-dollar-pledge' value='25' name='amount')
                        | $25 per month
                    label.btn.btn-primary
                        input(type='radio' id='50-dollar-pledge' value='50' name='amount')
                        | $50 per month
        .spacer
        .col-xs-12.col-sm-6.col-sm-offset-3
            h3 Step 3: Set up your monthly donation
        .row
            .col-xs-12.col-sm-6.col-sm-offset-3.text-center
                a#commit-btn-donate.btn.btn-block.btn-lg.btn-primary(href=donateUrl target='_blank') Open the #{displayName} donation page

        .spacer
        .col-xs-12.col-sm-6.col-sm-offset-3
            h3#commit-step4-text.disabled
                Step 4: Confirm
                span#commit-step4-hidden.disabled  (Do step 3 first)
                span#commit-step4-show.hidden  your commitment to your goal
        .row
            .col-xs-12.col-sm-6.col-sm-offset-3.text-center
                button#commit-btn-submit.btn.btn-block.btn-lg.btn-primary.disabled Commit

    if pledge
        form.row(name='stop-pledge' action='/commit/stop-commitment' method='post')
            input(type='hidden', name='_csrf', value=_csrf)
            .col-xs-12.col-sm-6.col-sm-offset-3.text-center
                .button-spacer
                button.btn.btn-block.btn-lg.btn-default(name='submit' type='submit') Stop my current pledge
    else
        .row
            .col-xs-12.col-sm-6.col-sm-offset-3.text-center
                .button-spacer
                a.btn.btn-block.btn-lg.btn-default(href='/map') Maybe later
    script.
      $(function() {
        $('#commit-btn-donate').click(function() {
          $('#commit-btn-submit').removeClass('disabled');
          $('#commit-step4-text').removeClass('disabled');
          $('#commit-step4-hidden').hide();
          $('#commit-step4-show').removeClass('hidden');
        });

        $('#commit-btn-submit').click(function() {

          if (
            history &&
            typeof history.pushState === 'function'
          ) {
            history.pushState(history.state, null, '/commit/pledge?' + $('form').serialize());
            return null;
          }

          window.location.href = '/commit/pledge?' + $('form').serialize();
        });
      });