<%inherit file="base.html" />
<%block name="title">Studio Alerts</%block>
<%block name="bodyclass">is-signedin course uxdesign alerts</%block>

<%block name="jsextra">
<script type="text/javascript">
  // notifications - demo
  $(document).ready(function() {

    // alert and notifications - manual close
    $('.action-alert-close, .alert.has-actions .nav-actions a').click(function(e) {
        (e).preventDefault();
        console.log('closing alert');
        $(this).closest('.wrapper-alert').removeClass('is-shown');
    });

    // alert and notifications - manual & action-based close
    $('.action-notification-close').click(function(e) {
        (e).preventDefault();
        $(this).closest('.wrapper-notification').removeClass('is-shown').addClass('is-hiding');
    });

    // prompt pop
    $('.action-prompt').click(function(e){
        (e).preventDefault();
        $body.toggleClass('prompt-is-shown');
        $(this).closest('.wrapper-prompt').attr('aria-hidden','false');
    });

    // prompt close
    $('.prompt .action-cancel, .prompt .action-proceed').click(function(e) {
        (e).preventDefault();
        $body.removeClass('prompt-is-shown');
        $(this).closest('.wrapper-prompt').attr('aria-hidden','true');
    });

    $('.hide-notification').click(function(e) {
        (e).preventDefault();
        $('.wrapper-notification').removeClass('is-hiding is-shown').attr('aria-hidden','true');
        $(this.hash).addClass('is-hiding').attr('aria-hidden','true');
    });

    $('.show-notification').click(function(e) {
        (e).preventDefault();
        $('.wrapper-notification').removeClass('is-shown is-hiding');
        $(this.hash).addClass('is-shown').attr('aria-hidden','false');
    });

    $('.show-notification-fleeting').click(function(e) {
        (e).preventDefault();
        $('.wrapper-notification').removeClass('is-fleeting').attr('aria-hidden','true');
        $(this.hash).addClass('is-fleeting').attr('aria-hidden','false');
    });

    $('.hide-alert').click(function(e) {
        (e).preventDefault();
        $('.wrapper-alert').removeClass('is-hiding');
        $(this.hash).addClass('is-hiding');
    });

    $('.show-alert').click(function(e) {
        (e).preventDefault();
        $('.wrapper-alert').removeClass('is-shown');
        $(this.hash).addClass('is-shown');
    });

    $('.hide-prompt').click(function(e){
        (e).preventDefault();
        $body.removeClass('prompt-is-shown');
    });

    $('.show-prompt').click(function(e) {
        (e).preventDefault();
        $body.toggleClass('prompt-is-shown');
        $('.wrapper-prompt').removeClass('is-shown');
        $(this.hash).addClass('is-shown').attr('aria-hidden','false');
    });
  });
</script>
</%block>

<%block name="content">
<div class="wrapper-mast wrapper">
  <header class="mast has-actions has-subtitle">
    <div class="title">
      <span class="title-sub">UX Design</span>
      <h1 class="title-1">System Notifications</h1>
    </div>
  </header>
</div>

<div class="wrapper-content wrapper">
  <section class="content">
    <article class="content-primary" role="main">
      <section>
        <header>
          <h2 class="title-2">Alerts</h2>
          <span class="tip">persistant, static messages to the user</span>
        </header>

        <p>In Studio, alerts are 1) general warnings/notes (e.g. drafts, published content, next steps) about the current view a user is interacting with or 2) notes about the status (e.g. saved confirmations, errors, next system steps) of any previous state that need to communicated to the user when arriving at the current view.</p>

        <h3 class="title-3">Different Static Examples of Alerts</h3>
        <p>Note: alerts will probably never been shown based on click or page action and will primarily be loaded along with a pageload and initial display</p>

        <ul>
          <li><a href="#alert-draft" class="show-alert">Show Draft</a></li>
          <li><a href="#alert-version" class="show-alert">Show Version</a></li>
          <li><a href="#alert-saved" class="show-alert">Show Previous View/Action</a></li>
          <li><a href="#alert-close" class="show-alert">Show Alert with Close Option</a></li>
          <li><a href="#alert-removed" class="show-alert">Show Previous View/Action Removed</a></li>
          <li><a href="#alert-system-error" class="show-alert">Show System Error</a></li>
          <li><a href="#alert-user-error" class="show-alert">Show User Error</a></li>
          <li><a href="#alert-announcement2" class="show-alert">Show Announcement</a></li>
          <li><a href="#alert-announcement1" class="show-alert">Show Announcement with Actions</a></li>
          <li><a href="#alert-activation" class="show-alert">Show Activiation</a></li>
        </ul>
      </section>

      <section>
        <header>
          <h2 class="title-2">Notifications</h2>
          <span class="tip">contextual, feedback-based, and temporal messages to the user</span>
        </header>

        <p>In Studio, notifications are meant to inform the user of 1) any system status (e.g. saving, processing/validating) occurring based on any action they have taken or 2) any decisions (e.g. saving/discarding) a user must make to confirm.</p>

        <h3 class="title-3">Different Static Examples of Notifications</h3>

        <ul>
          <li>
            <a href="#notification-change" class="show-notification">Show Change Warning</a>
            <a href="#notification-change" class="hide-notification">Hide Change Warning</a>
          </li>
          <li>
            <a href="#notification-version" class="show-notification">Show New Version Warning</a>
            <a href="#notification-version" class="hide-notification">Hide New Version Warning</a>
          </li>
          <li>
            <a href="#notification-dangerous" class="show-notification">Show Editing Warning</a>
            <a href="#notification-dangerous" class="hide-notification">Hide Editing Warning</a>
          </li>
          <li>
            <a href="#notification-confirmation" class="show-notification-fleeting">Show Confirmation (Fleeting Notification)</a>
          </li>
          <li>
            <a href="#notification-saving" class="show-notification">Show Saving</a>
            <a href="#notification-saving" class="hide-notification">Hide Saving</a>
          </li>
          <li>
            <a href="#notification-help" class="show-notification">Show Help</a>
            <a href="#notification-help" class="hide-notification">Hide Help</a>
          </li>
        </ul>
      </section>

      <section>
        <header>
          <h2 class="title-2">Prompts</h2>
          <span class="tip">presents a user with a choice, based on their previous interaction, that must be decided before they can proceed</span>
        </header>

        <p>In Studio, prompts are dialogs that are presented above all other page components and present a user with a choice, based on their previous interaction, that must be decided before they can proceed (or return to the previous interaction step).</p>

        <h3 class="title-3">Different Static Examples of Prompts</h3>

        <ul>
          <li>
            <a href="#prompt-confirm" class="show-prompt">Show Confirm Prompt</a>
          </li>
          <li>
            <a href="#prompt-warning" class="show-prompt">Show Warning Prompt</a>
          </li>
          <li>
            <a href="#prompt-error" class="show-prompt">Show Error Prompt</a>
          </li>
        </ul>
      </section>
    </article>
  </section>
</div>
</%block>

<%block name="view_alerts">
<!-- alert: you're editing a draft -->
<div class="wrapper wrapper-alert wrapper-alert-warning" id="alert-draft">
  <div class="alert warning has-actions">
    <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>

    <div class="copy">
      <h2 class="title title-3">You are editing a draft</h2>
      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    </div>

    <nav class="nav-actions">
      <h3 class="sr">Alert Actions</h3>
      <ul>
        <li class="nav-item">
          <a href="#" class="button save-button action-primary">Save Draft</a>
        </li>
        <li class="nav-item">
          <a href="#" class="button cancel-button action-secondary">Disgard Draft</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- alert: newer version -->
<div class="wrapper wrapper-alert wrapper-alert-warning" id="alert-version">
  <div class="alert warning has-actions">
    <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>

    <div class="copy">
      <h2 class="title title-3">A Newer Version of This Exists</h2>
      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    </div>

    <nav class="nav-actions">
      <h3 class="sr">Alert Actions</h3>
      <ul>
        <li class="nav-item">
          <a href="#" class="button save-button action-primary">Go to Newer Version</a>
        </li>
        <li class="nav-item">
          <a href="#" class="button cancel-button action-secondary">Continue Editing</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- alert: save confirmed -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation" id="alert-saved">
  <div class="alert confirmation">
    <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>

    <div class="copy">
      <h2 class="title title-3">Your changes have been saved</h2>
      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a rel="page" href="#test">Please see below</a></p>
    </div>
  </div>
</div>

<!-- alert: save confirmed with close -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation" id="alert-close">
  <div class="alert confirmation">
    <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>

    <div class="copy">
      <h2 class="title title-3">Your changes have been saved</h2>
      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a rel="page" href="#test">Please see below</a></p>
    </div>

    <a href="#" rel="view" class="action action-alert-close">
      <i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
      <span class="label">close alert</span>
    </a>
  </div>
</div>

<!-- alert: delete confirmed -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation" id="alert-removed">
  <div class="alert confirmation">
    <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>

    <div class="copy">
      <h2 class="title title-3">X Has been removed</h2>
      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    </div>
  </div>
</div>

<!-- alert: system error -->
<div class="wrapper wrapper-alert wrapper-alert-error" id="alert-system-error">
  <div class="alert error">
    <i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>

    <div class="copy">
      <h2 class="title title-3">We're sorry, there was a error with Studio</h2>
      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    </div>
  </div>
</div>

<!-- alert: user error -->
<div class="wrapper wrapper-alert wrapper-alert-error" id="alert-user-error">
  <div class="alert error has-actions">
    <i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>

    <div class="copy">
      <h2 class="title title-3">There was an error in your submission</h2>
      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a rel="page" href="#test">Please see below</a></p>
    </div>

    <nav class="nav-actions">
      <h3 class="sr">Alert Actions</h3>
      <ul>
        <li class="nav-item">
          <a href="#" class="button cancel-button action-primary">Cancel Your Submission</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- alert: announcement w/ actions -->
<div class="wrapper wrapper-alert wrapper-alert-announcement" id="alert-announcement1">
  <div class="alert announcement has-actions">
    <i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i>

    <div class="copy">
      <h2 class="title title-3">Studio will be unavailable this weekend</h2>
      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    </div>

    <nav class="nav-actions">
      <h3 class="sr">Alert Actions</h3>
      <ul>
        <li class="nav-item">
          <a href="#" rel="external" class="action-primary">Contact edX Staff</a>
        </li>
        <li class="nav-item">
          <a href="#" class="action-secondary">Manage Your edX Notifications</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- alert: announcement -->
<div class="wrapper wrapper-alert wrapper-alert-announcement" id="alert-announcement2">
  <div class="alert announcement">
    <i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i>

    <div class="copy">
      <h2 class="title title-3">Studio will be unavailable this weekend</h2>
      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    </div>
  </div>
</div>

<!-- alert: step required -->
<div class="wrapper wrapper-alert wrapper-alert-step-required" id="alert-activation">
  <div class="alert step-required has-actions">
    <i class="ss-icon ss-symbolicons-block icon icon-step-required">&#xE0D1;</i>

    <div class="copy">
      <h2 class="title title-3">Your Studio account has been created, but needs to be activated</h2>
      <p class="message">Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.</p>
    </div>

    <nav class="nav-actions">
      <h3 class="sr">Alert Actions</h3>
      <ul>
        <li class="nav-item">
          <a href="#" class="action-primary">Re-send Activation Message</a>
        </li>
        <li class="nav-item">
          <a href="#" rel="external" class="action-secondary">Contact edX Support</a>
        </li>
      </ul>
    </nav>
  </div>
</div>
</%block>

<%block name="view_notifications">
<!-- notification: change has been made and a save is needed -->
<div class="wrapper wrapper-notification wrapper-notification-change" id="notification-change" role="status">
  <div class="notification change has-actions">
    <i class="ss-icon ss-symbolicons-block icon icon-change">&#x1F4DD;</i>

    <div class="copy">
      <h2 class="title title-3">You've Made Some Changes</h2>
      <p class="message">Your changes will not take effect until you <strong>save your progress</strong>.</p>
    </div>

    <nav class="nav-actions">
      <h3 class="sr">Notification Actions</h3>
      <ul>
        <li class="nav-item">
          <a href="#" class="action-primary">Save Changes</a>
        </li>
        <li class="nav-item">
          <a href="#" class="action-secondary">Don't Save</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- notification: newer version exists -->
<div class="wrapper wrapper-notification wrapper-notification-warning" id="notification-version" aria-hidden="true" role="dialog" aria-labelledby="notification-warning-title" aria-describedby="notification-warning-description">
  <div class="notification warning has-actions">
    <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>

    <div class="copy">
      <h2 class="title title-3" id="notification-warning-title">A Newer Version of This Exists</h2>
      <p class="message" id="notification-warning-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    </div>

    <nav class="nav-actions">
      <h3 class="sr">Notification Actions</h3>
      <ul>
        <li class="nav-item">
          <a href="#" class="button save-button action-primary">Go to Newer Version</a>
        </li>
        <li class="nav-item">
          <a href="#" class="button cancel-button action-secondary">Continue Editing</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- notification: warning about editing something dangerous -->
<div class="wrapper wrapper-notification wrapper-notification-warning" id="notification-dangerous" aria-hidden="true" role="dialog" aria-labelledby="notification-dangerous-title" aria-describedby="notification-dangerous-description">
  <div class="notification warning has-actions">
    <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>

    <div class="copy">
      <h2 class="title title-3" id="notification-dangerous-title">Are You Sure You Want to Edit That?</h2>
      <p class="message" id="notification-dangerous-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    </div>

    <nav class="nav-actions">
      <h3 class="sr">Notification Actions</h3>
      <ul>
        <li class="nav-item">
          <a href="#" class="action-primary">Yes, I want to Edit X</a>
        </li>
        <li class="nav-item">
          <a href="#" class="action-secondary">No, I do not</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- notification: status - saving -->
<div class="wrapper wrapper-notification wrapper-notification-status wrapper-notification-saving" id="notification-saving">
  <div class="notification saving">
    <i class="ss-icon ss-symbolicons-block icon icon-saving">&#x2699;</i>

    <div class="copy">
      <h2 class="title title-3" role="status">Saving &hellip;</h2>
    </div>
  </div>
</div>

<!-- notification: status- confirmed -->
<div class="wrapper wrapper-notification wrapper-notification-confirmation" id="notification-confirmation">
  <div class="notification confirmation">
    <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>

    <div class="copy">
      <h2 class="title title-3" role="status"><a href="#">Your Section</a> Has Been Created</h2>
    </div>
  </div>
</div>

<!-- notification: help - DYK -->
<div class="wrapper wrapper-notification wrapper-notification-help" id="notification-help">
  <div class="notification help">
    <i class="ss-icon ss-symbolicons-block icon icon-help">&#x2753;</i>

    <div class="copy">
      <h2 class="title title-3">Fun Fact:</h2>
      <p class="message">Using the checkmark will allow you make a subsection gradable as an assignment, which counts towards a student's total grade</p>
    </div>

    <a href="#" rel="view" class="action action-notification-close">
      <i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
      <span class="label">close notification</span>
    </a>
  </div>
</div>
</%block>

<%block name="view_prompts">
<!-- prompt - confirm deletion -->
<div class="wrapper wrapper-prompt wrapper-prompt-confirm" id="prompt-confirm" aria-hidden="true" role="dialog" aria-labelledby="prompt-confirm-sectionDelete-title" aria-describedby="prompt-confirm-sectionDelete-description">
  <div class="prompt confirm">
    <div class="copy">
      <h2 class="title title-3" id="prompt-confirm-sectionDelete-title">Delete "Introduction &amp; Overview"?</h2>
      <p class="message" id="prompt-confirm-sectionDelete-description">Deleting a section cannot be undone and its contents cannot be recovered.</p>
    </div>

    <nav class="nav-actions">
      <h3 class="sr">Prompt Actions</h3>
      <ul>
        <li class="nav-item">
          <a href="#" class="action-primary action-proceed">Yes, delete this section</a>
        </li>
        <li class="nav-item">
          <a href="#" class="action-secondary action-cancel">Cancel</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- prompt - warning -->
<div class="wrapper wrapper-prompt wrapper-prompt-warning" id="prompt-warning" aria-hidden="true" role="dialog" aria-labelledby="prompt-warning-useAdvanced-title" aria-describedby="prompt-warning-useAdvanced-description">
  <div class="prompt warning">
    <div class="copy">
      <h2 class="title title-3" id="prompt-warning-useAdvanced-title">Use Advanced Problem Editor?</h2>
      <p class="message" id="prompt-warning-useAdvanced-description">If you proceed, you cannot edit this problem using the simple problem editor.</p>
    </div>

    <nav class="nav-actions">
      <h3 class="sr">Prompt Actions</h3>
      <ul>
        <li class="nav-item">
          <a href="#" class="action-primary action-proceed">Continue to Advanced Editor</a>
        </li>
        <li class="nav-item">
          <a href="#" class="action-secondary action-cancel">Cancel</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- prompt - error -->
<div class="wrapper wrapper-prompt wrapper-prompt-error" id="prompt-error" aria-hidden="true" role="dialog" aria-labelledby="prompt-errorUser-title" aria-describedby="prompt-errorUser-description">
  <div class="prompt error">
    <div class="copy">
      <h2 class="title title-3" id="prompt-errorUser-title">There Were Errors in Your Submission</h2>
      <p class="message" id="prompt-errorUser-description">Please correct the errors noted on the page and try again.</p>
    </div>

    <nav class="nav-actions">
      <h3 class="sr">Prompt Actions</h3>
      <ul>
        <li class="nav-item">
          <a href="#" class="action-primary action-proceed">Correct errors &amp; try again</a>
        </li>
      </ul>
    </nav>
  </div>
</div>
</%block>
