<div class="o-modal-outer-container">
  {{#ifCond state "===" "watchlist-subscriber"}}
    <div class="o-modal-container o-modal-container--logged-in">
      <div class="o-modal-row o-modal-row--blue o-modal-row--close">
        <button class="c-button c-button--blue-secondary c-button--icon-only c-button--no-border c-button--financial-close" type="button">
          <svg class="c-control__icon">
            <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#close-x"></use>
          </svg>
        </button>
      </div>

      <div class="o-modal-row o-modal-row--main">
        <h2 class="c-modal-header">Welcome to Watchlist</h2>
        <p class="c-modal-text">It’s the perfect tool to help you make faster, informed decisions to manage and track your investments.</p>
        <button class="c-button c-button--blue-primary" type="button">get started</button>
      </div>
    </div>
  {{/ifCond}}

  {{#ifCond state "===" "watchlist-anonymous"}}
    <div class="o-modal-container o-modal-container--anonymous">
      <div class="o-modal-row o-modal-row--blue o-modal-row--close">
        <button class="c-button c-button--blue-secondary c-button--icon-only c-button--no-border c-button--financial-close" type="button">
          <svg class="c-control__icon">
            <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#close-x"></use>
          </svg>
        </button>
      </div>

      <div class="o-modal-row o-modal-row--main">
        <h2 class="c-modal-header">Welcome to Watchlist</h2>
        <p class="c-modal-text">It’s the perfect tool to help you make faster, informed decisions to manage and track your investments.</p>
      </div>

      <div class="o-modal-row o-modal-row--grey o-modal-row--footer">
        <p class="c-modal-text">You need to register to The Globe and Mail to access My Watchlist. Create an account for free. If you have already registered, then Log In.</p>
        <button class="c-button c-button--utility-primary--green" type="button">create an account</button>
        <button class="c-button" type="button">login</button>
      </div>
    </div>
  {{/ifCond}}

  {{#ifCond state "===" "portfolio-anonymous"}}
    <div class="o-modal-container o-modal-container--anonymous">
      <div class="o-modal-row o-modal-row--blue o-modal-row--close">
        <button class="c-button c-button--blue-secondary c-button--icon-only c-button--no-border c-button--financial-close" type="button">
          <svg class="c-control__icon">
            <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#close-x"></use>
          </svg>
        </button>
      </div>

      <div class="o-modal-row o-modal-row--main">
        <h2 class="c-modal-header">Welcome to Portfolio</h2>
        <p class="c-modal-text">It’s the perfect tool to help you make faster, informed decisions to manage and track your investments.</p>
      </div>

      <div class="o-modal-row o-modal-row--grey o-modal-row--footer">
        <p class="c-modal-text">You need to register to The Globe and Mail to access My Watchlist. Create an account for free. If you have already registered, then Log In.</p>
        <button class="c-button c-button--utility-primary--green" type="button">subscribe</button>
        <button class="c-button" type="button">login</button>
      </div>
    </div>
  {{/ifCond}}

  {{#ifCond state "===" "portfolio-registered"}}
    <div class="o-modal-container o-modal-container--anonymous">
      <div class="o-modal-row o-modal-row--blue o-modal-row--close">
        <button class="c-button c-button--blue-secondary c-button--icon-only c-button--no-border c-button--financial-close" type="button">
          <svg class="c-control__icon">
            <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#close-x"></use>
          </svg>
        </button>
      </div>

      <div class="o-modal-row o-modal-row--main">
        <h2 class="c-modal-header">Welcome to Portfolio</h2>
        <p class="c-modal-text">It’s the perfect tool to help you make faster, informed decisions to manage and track your investments.</p>
      </div>

      <div class="o-modal-row o-modal-row--grey o-modal-row--footer">
        <p class="c-modal-text">You need to register to The Globe and Mail to access My Watchlist. Create an account for free. If you have already registered, then Log In.</p>
        <button class="c-button c-button--utility-primary--green" type="button">subscribe</button>
        <button class="c-button" type="button">link print account</button>
      </div>
    </div>
  {{/ifCond}}

  {{#ifCond state "===" "portfolio-subscriber"}}
    <div class="o-modal-container o-modal-container--logged-in">
      <div class="o-modal-row o-modal-row--blue o-modal-row--close">
        <button class="c-button c-button--blue-secondary c-button--icon-only c-button--no-border c-button--financial-close" type="button">
          <svg class="c-control__icon">
            <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#close-x"></use>
          </svg>
        </button>
      </div>

      <div class="o-modal-row o-modal-row--main">
        <h2 class="c-modal-header">Welcome to Watchlist</h2>
        <p class="c-modal-text">It’s the perfect tool to help you make faster, informed decisions to manage and track your investments.</p>
        <button class="c-button c-button--blue-primary" type="button">get started</button>
      </div>
    </div>
  {{/ifCond}}
</div>
