<!-- Preview desc -->
<div class="ds-breathe-vert"><h3>Show</h3></div>
<!-- Preview desc -->
<div class="b-collection-header has-bg-white-off p-xxs">
  <div class="b-collection-header__image m-xxs">
    <img
      src="https://api.wbez.org/v2/images/446bc008-649a-4ccb-88fc-0ac3c5677a05.jpg?width=206&amp;height=206&amp;mode=FILL&amp;threshold=0"
      alt="Curious City"
    />
  </div>

  <div class="b-collection-header__copy m-xxs t-align-center">
    <h1 class="b-collection-header__title">Curious City</h1>

    <button class="c-button -round -primary">
      <i class="c-icon c-button__inner t-size-l mr-xxxs"
        ><svg aria-hidden="true"><use xlink:href="#play"></use></svg
      ></i>
      Play
    </button>

    {% set className = '-row' %}
    {% include '../../6-components/share-bar/share-bar.html' %}
  </div>
</div>

<!-- Preview desc -->
<div class="ds-breathe-vert"><h3>Author</h3></div>
<!-- Preview desc -->
<div class="b-collection-header -profile  has-bg-white-off p-xxs">
  <div class="b-collection-header__image m-xxs">
    <img src="https://via.placeholder.com/200" alt="" />
  </div>

  <div class="b-collection-header__copy m-xxs t-align-center">
    <h1 class="b-collection-header__title mb-tiny">Jane Journalist</h1>

    <div class="group">
      <p class="b-collection-header__subtitle has-text-gray-medium t-size-l">Reporter</p>
      <p><a href="#">jjournalist@wbez.org</a></p>
    </div>

    {% set className = '-row' %}
    {% include '../../6-components/share-bar/share-bar.html' %}
  </div>
</div>

<!-- Preview desc -->
<div class="ds-breathe-vert"><h3>Tag</h3></div>
<!-- Preview desc -->
<div class="b-collection-header has-bg-white-off p-xxs">
  <div class="b-collection-header__copy m-xxs t-align-center">
    <h1 class="b-collection-header__title">#rahm emanuel</h1>

    <button class="c-button -round -primary">
      <i class="c-icon c-button__inner t-size-l mr-xxxs"
        ><svg aria-hidden="true"><use xlink:href="#play"></use></svg
      ></i>
      Play
    </button>

    {% set className = '-row' %}
    {% include '../../6-components/share-bar/share-bar.html' %}
  </div>
</div>

<!-- Preview desc -->
<div class="ds-breathe-vert"><h3>Topic</h3></div>
<!-- Preview desc -->
<div
  class="b-collection-header -topic has-bg-white-off p-xxs"
  style="background-image: url(https://api.wbez.org/v2/images/0fb53179-8deb-4c34-b1f7-339ecb42bcba.jpg?width=728&amp;height=260&amp;mode=FILL&amp;threshold=0);"
>
  <div class="b-collection-header__copy m-xxs t-align-center">
    <h1 class="b-collection-header__title">Politics</h1>

    <button class="c-button -round -primary">
      <i class="c-icon c-button__inner t-size-l mr-xxxs"
        ><svg aria-hidden="true"><use xlink:href="#play"></use></svg
      ></i>
      Play
    </button>

    {% set className = '-row' %}
    {% include '../../6-components/share-bar/share-bar.html' %}
  </div>
</div>

<nav class="b-navbar c-splash-background p-s">
  <div class="l-container b-navbar__grid">
    <a class="b-navbar__logo" href="/" title="Homepage">
      <img
        class="is-hidden-from-bp-m"
        src="/img/wbez-logo-short.png"
        alt="WBEZ 91.5 Chicago"
      />
      <img
        class="is-hidden-until-bp-m"
        src="/img/wbez-logo-full.png"
        alt="WBEZ 91.5 Chicago"
      />
    </a>

    <ul class="b-navbar__top-links c-list -inline t-align-right">
      <li><a target="_blank" href="http://wbez.org/members">Account</a></li>
      <li><a class="search" href="/search">Search</a></li>
    </ul>

    <ul class="b-navbar__main-items -left">
      <li class="b-navbar__main-item m-tiny">
        <a class="c-button -circle -dark t-size-xxl donate_button" href="#">
          <i class="c-icon t-size-l has-text-red" style="height: 35px;">
            <svg aria-hidden="true"><use xlink:href="#heart"></use></svg>
          </i>
          <span class="t-size-xs">Donate</span>
        </a>
      </li>
      <li class="b-navbar__main-item m-tiny is-hidden-until-bp-l">
        <a class="c-button -circle -dark t-size-xxl connect_button" href="#">
          <i class="c-icon t-size-l has-text-gray-light" style="height: 35px;">
            <svg aria-hidden="true"><use xlink:href="#envelope"></use></svg>
          </i>
          <span class="t-size-xs">Connect</span>
        </a>
      </li>
    </ul>

    <ul class="b-navbar__main-items -right">
      <li class="b-navbar__main-item m-tiny is-hidden-until-bp-l">
        <a class="c-button -circle -dark t-size-xxl queue_nav_button" href="#">
          <i class="c-icon t-size-l has-text-gray-light" style="height: 35px;">
            <svg aria-hidden="true"><use xlink:href="#list"></use></svg>
          </i>
          <span class="t-size-xs">Queue</span> <sup class="queue_count">1</sup>
        </a>
      </li>
      <li class="b-navbar__main-item m-tiny is-hidden-until-bp-l">
        <a class="c-button -circle -dark t-size-xxl shows_button" href="#">
          <i class="c-icon t-size-l has-text-gray-light" style="height: 35px;">
            <svg aria-hidden="true"><use xlink:href="#microphone"></use></svg>
          </i>
          <span class="t-size-xs">Shows A–Z</span>
        </a>
      </li>
      <li class="b-navbar__main-item m-tiny is-hidden-from-bp-l">
        <button class="c-button -circle -dark t-size-xxl menu_button" href="#">
          <i class="c-icon t-size-l has-text-gray-light">
            <svg aria-hidden="true"><use xlink:href="#menu"></use></svg>
          </i>
          <span class="t-size-xs">Menu</span>
        </button>
      </li>
    </ul>
  </div>
</nav>

<script>
  function validateForm() {
    return false;
  }
</script>

<aside class="b-newsletter-signup has-bg-gray-light has-text-gray-dark p-xxs">
  <p class="b-newsletter-signup__text m-xs">
    Stay up-to-date with the latest news, stories and insider events.
  </p>

  <form
    data-gtm-location="DIGITAL-WBEZ-STORY-INSIDE"
    class="c-mini-form b-newsletter-signup__form m-xs"
    onsubmit="validateForm"
    {#
    method="post"
    #}
    {#
    action="/newsletter-signup"
    #}
  >
    <div class="c-text-input">
      <input
        class="c-text-input__input"
        type="email"
        name="email"
        placeholder="Your email address"
        required
      />
      <label class="c-text-input__label" for="email">Your email address</label>
    </div>

    <input
      type="hidden"
      name="Most_Recent_Acquisition_Campaign"
      value="DIGITAL-WBEZ-STORY-INSIDE"
    />

    <!-- <span class="invalid-email error_message">Please enter a valid email address</span>
    <span class="error error_message">Oops, something went wrong!</span> -->

    <button class="c-button -round ml-xs" type="submit">Sign Up</button>
    <!-- <button class="error invalid-email" type="submit">Try Again</button> -->

    <!-- <img src="/img/loading_dots_grey.gif" class="processing" /> -->
  </form>

  <p class="b-newsletter-signup__text b-newsletter-signup__on-success m-xs">
    You've signed up to receive emails. Please check your email for a welcome
    confirmation.
  </p>
</aside>

<section id="related_stories_container" class="stories_container">
  <h2 class="t-section-heading">Related Stories</h2>
  <div class="row my-s">
    {% set data = { 
      'headline': 'Widespread Hospitalizations, One Death In Illinois Prompt Investigation Into Vaping',
      'imageUrl': 'https://api.wbez.org/v2/images/3b0bf719-1b89-4a8e-9f5f-3918c47e16b8.jpg?width=145&height=145&mode=FILL&threshold=0',
      'datestamp': 'August 29, 2019' 
    } %}
    {% include '../../6-components/content-unit/partials/_skinny.html' %}
    
    {% set data = {
      'headline': 'Lake County State’s Attorney Sues Juul Labs For Allegedly Targeting Teens',
      'imageUrl': 'https://api.wbez.org/v2/images/f30c3d9a-f8d5-4191-afcd-aea464ec3fb8.jpg?width=145&height=145&mode=FILL&threshold=0',
      'datestamp': 'August 15, 2019' 
    } %}
    {% include '../../6-components/content-unit/partials/_skinny.html' %}
    
    {% set data = {
      'headline': 'You Have To Be 21 To Smoke In Illinois. Will New Law Affect Teen Vaping?',
      'imageUrl': 'https://api.wbez.org/v2/images/2fde6e16-c1d1-4ed2-bcf1-180d5732a43f.jpg?width=145&height=145&mode=FILL&threshold=0',
      'datestamp': 'April 9, 2019'
    } %}
    {% include '../../6-components/content-unit/partials/_skinny.html' %}
    
    {% set data = {
      'headline': 'Vaping Trend Explodes At Schools Across The Country',
      'imageUrl': 'https://api.wbez.org/v2/images/2fde6e16-c1d1-4ed2-bcf1-180d5732a43f.jpg?width=145&height=145&mode=FILL&threshold=0',
      'datestamp': 'April 5, 2019' 
    } %}
    {% include '../../6-components/content-unit/partials/_skinny.html' %}
  </div>
</section>

<footer class="b-site-footer c-splash-background p-s">
  <div class="l-container">
    <div class="b-site-footer__top b-site-footer__row my-xl">
      <a class="b-site-footer__logo my-s" href="/" title="Homepage">
        <img src="/img/wbez-logo-full.png" alt="WBEZ 91.5 Chicago" />
      </a>

      <ul class="b-site-footer__social-icons c-list -inline my-s">
        <li class="b-site-footer__social-icon">
          <a
            class="c-button -circle t-size-s has-bg-hover-twitter"
            href="https://twitter.com/WBEZ"
            target="_blank"
            title="Twitter"
          >
            <i class="c-icon t-size-b">
              <svg aria-hidden="true"><use xlink:href="#twitter"></use></svg>
            </i>
          </a>
        </li>
        <li class="b-site-footer__social-icon">
          <a
            class="c-button -circle t-size-s has-bg-hover-facebook"
            href="https://www.facebook.com/wbez915"
            target="_blank"
            title="Facebook"
          >
            <i class="c-icon t-size-b">
              <svg aria-hidden="true"><use xlink:href="#facebook"></use></svg>
            </i>
          </a>
        </li>
        <li class="b-site-footer__social-icon">
          <a
            class="c-button -circle t-size-s has-bg-hover-instagram"
            href="https://instagram.com/wbezchicago/"
            target="_blank"
            title="Instagram"
          >
            <i class="c-icon t-size-b">
              <svg aria-hidden="true"><use xlink:href="#instagram"></use></svg>
            </i>
          </a>
        </li>
        <li class="b-site-footer__social-icon">
          <a
            class="c-button -circle t-size-s has-bg-hover-youtube"
            href="https://www.youtube.com/user/wbez"
            target="_blank"
            title="YouTube"
          >
            <i class="c-icon t-size-b">
              <svg aria-hidden="true"><use xlink:href="#youtube"></use></svg>
            </i>
          </a>
        </li>
        <li class="b-site-footer__social-icon">
          <a
            class="c-button -circle t-size-s has-bg-hover-feedburner"
            href="http://feeds.feedburner.com/wbez"
            target="_blank"
            title="Feedburner"
          >
            <i class="c-icon t-size-b">
              <svg aria-hidden="true"><use xlink:href="#feedburner"></use></svg>
            </i>
          </a>
        </li>
      </ul>
    </div>

    <div class="b-site-footer__menus b-site-footer__row my-xl">
      <ul class="b-site-footer__sections">
        <li>
          <a class="c-button -dark t-size-s mb-tiny py-s" href="/shows">
            <i class="c-icon t-size-l">
              <svg aria-hidden="true"><use xlink:href="#microphone"></use></svg>
            </i>
            <span class="t-align-left">Shows A–Z</span>
          </a>
        </li>
        <li>
          <a class="c-button -dark t-size-s mb-tiny py-s" href="/schedule">
            <i class="c-icon t-size-l">
              <svg aria-hidden="true"><use xlink:href="#calendar"></use></svg>
            </i>
            <span class="t-align-left">Radio Schedule</span>
          </a>
        </li>
        <li>
          <a class="topics c-button -dark t-size-s mb-tiny py-s" href="/topics">
            <i class="c-icon t-size-l">
              <svg aria-hidden="true"><use xlink:href="#binoculars"></use></svg>
            </i>
            <span class="t-align-left">Topics</span>
          </a>
        </li>
        <li>
          <a
            class="vocalo c-button -dark t-size-s mb-tiny py-s"
            href="/schedule#vocalo"
          >
            <i class="c-icon"> <img src="/img/section_vocalo.png" alt="" /> </i>
            <span class="t-align-left">Vocalo</span>
          </a>
        </li>
      </ul>

      <div class="b-site-footer__menu">
        <h3 class="b-site-footer__heading mb-xxxs">
          <a
            class="t-unlink"
            href="https://www.chicagopublicmedia.org/about/mission"
            target="_blank"
            >About Us</a
          >
        </h3>

        <ul>
          <li>
            <a href="https://www.chicagopublicmedia.org/careers" target="_blank"
              >Careers</a
            >
          </li>
          <li><a href="/staff">Staff</a></li>
          <li>
            <a href="https://www.chicagopublicmedia.org/contact" target="_blank"
              >Contact Us</a
            >
          </li>
          <li>
            <a
              href="https://www.chicagopublicmedia.org/page/community-advisory-council"
              target="_blank"
              >The Sounding Board</a
            >
          </li>
          <li>
            <a
              href="https://s3.amazonaws.com/wbez-assets/Assets/wbez_program_schedule.pdf"
              class="schedule"
            >
              <span>Broadcast Schedule</span>
            </a>
          </li>
        </ul>
      </div>

      <div class="b-site-footer__menu">
        <h3 class="b-site-footer__heading mb-xxxs">
          <a href="/connect" class="t-unlink">Connect</a>
        </h3>
        <ul>
          <li><a href="/connect">Sign Up for our Newsletter</a></li>
          <li>
            <a href="http://pages.wbez.org/volunteer-signup">Volunteer</a>
          </li>
          <li><a href="/events">Events Calendar</a></li>
          <li>
            <a href="/events/wait-wait-dont-tell-me-tickets"
              >Wait Wait ... Don’t Tell Me! Tickets</a
            >
          </li>
        </ul>
      </div>

      <div class="b-site-footer__menu">
        <h3 class="b-site-footer__heading mb-xxxs">
          <a class="t-unlink" href="/waystogive">Support</a>
        </h3>
        <ul>
          <li>
            <a
              href="https://donate.chicagopublicmedia.org/give/wbez/?utm_campaign=WEB_Footer_Donate&amp;utm_medium=web&amp;utm_source=wbez.org"
              target="_blank"
              class="donate"
            >
              <span>Donate</span>
            </a>
          </li>
          <li><a href="/waystogive">Support WBEZ</a></li>
          <li><a href="/givingcircles">Join our Giving Circles</a></li>
          <li><a href="/car">Donate Your Car</a></li>
          <li><a href="/securities">Gifts of Securities</a></li>
          <li><a href="/plannedgiving">Planned Giving</a></li>
          <li><a href="/matchinggifts">Matching Gifts</a></li>
          <li><a href="/corporatesponsorship">Become a Sponsor</a></li>
          <li>
            <a
              href="https://www.chicagopublicmedia.org/members/login"
              target="_blank"
              >Manage Your Account</a
            >
          </li>
        </ul>
      </div>
    </div>

    <div class="b-site-footer__promos b-site-footer__row my-xl">
      <div class="b-site-footer__promo t-align-center p-b">
        <h3 class="b-site-footer__heading mb-xxxs">Get the WBEZ App</h3>
        <p>
          Download the best live and on-demand public radio experience.
          <a href="/mobileapps">Find out more</a>.
        </p>
        <ul class="c-list -inline t-align-center">
          <li>
            <a
              class="c-button -no-border"
              target="_blank"
              href="https://itunes.apple.com/us/app/wbez/id587477231?mt=8"
            >
              <img
                src="/img/badge-apple-app.png"
                alt="Available on the Apple App Store"
              />
            </a>
          </li>
          <li>
            <a
              class="c-button -no-border"
              target="_blank"
              href="https://play.google.com/store/apps/details?id=com.wbez.app"
            >
              <img
                src="/img/badge-google-app.png"
                alt="Get it on Google Play"
              />
            </a>
          </li>
        </ul>
      </div>

      <div class="b-site-footer__promo t-align-center p-b">
        <h3 class="b-site-footer__heading mb-xxxs">Be Informed</h3>
        <p>
          Stay up-to-date with the latest news, stories and insider events from
          WBEZ.
        </p>
        <form class="form-inline">
          <div class="c-text-input">
            <input
              type="text"
              name="EmailAddress"
              class="c-text-input__input"
              placeholder="Your email address"
            />
            <label class="c-text-input__label" for="EmailAddress"
              >Your email address</label
            >
          </div>
          <button
            type="submit"
            value="Submit"
            class="c-button -round t-size-s ml-s"
          >
            Sign Me Up!
          </button>
        </form>
      </div>
    </div>

    <div
      class="b-site-footer__support b-site-footer__row t-align-center t-size-xxs my-xl"
    >
      <h3 class="b-site-footer__heading t-weight-normal mb-xxxs">
        Supported by<span class="sr-only"> Pritzker Foundation</span>
      </h3>
      <img src="/img/pritzker-foundation-logo.png" alt="" />
    </div>

    <div class="b-site-footer__copyright b-site-footer__row my-xl">
      <ul class="c-list -inline t-size-xxs t-align-center">
        <li class="copyright">Copyright 2019</li>
        <li>
          <a
            target="_blank"
            href="https://www.chicagopublicmedia.org/page/privacy-policy"
            >Privacy Policy</a
          >
        </li>
        <li>
          <a
            target="_blank"
            href="https://www.chicagopublicmedia.org/page/terms-use"
            >Terms of Use</a
          >
        </li>
        <li>
          <a target="_blank" href="https://publicfiles.fcc.gov/fm-profile/wbez"
            >FCC Public Filing Info</a
          >
        </li>
      </ul>
    </div>
  </div>
</footer>