{{ article.load_static_string }}

<div class="myuw-article">
    <div class="row">
        <div class="col-md-8">
            <div class="myuw-article-meta">
                <a href="/husky_experience/">Husky Experience</a>: Thrive - {{ article.category.title }}
            </div>
            <h2 class="myuw-heading-page">{{ article.title }}</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8">

            <figure class="myuw-article-heroimage">
                {%  with img=article.image_srcset_paths%}
                    <img class="myuw-card-image-full"
                         srcset="{{ img.480|safe }} 480w,
                             {{ img.650|safe }} 650w,
                             {{ img.780|safe }} 780w,
                             {{ img.1000|safe }} 1000w"
                         sizes="(max-width: 767px) 100vw,
                            650px"
                         src="{{ img.650|safe }}"
                         alt="{{ article.image_alt_text }}">
                {% endwith %}
                {% if article.image_credit %}
                    <p>{{ article.image_credit }}</p>
                {% endif %}
            </figure>

            {{ article.long_body | safe}}

            {%  if article.related_links.all %}
                <h3 class="myuw-heading-page">Resources</h3>
                <ul>
                    {% for link in article.related_links.all %}
                        <li><a href="{{ link.url }}">{{ link.title }}</a></li>
                    {% endfor %}
                </ul>
            {% endif %}

            {%  if article.related_articles.all %}
                <h3 class="myuw-heading-page">Related Topic</h3>
                <ul>
                    {% for article in article.related_articles.all %}
                        <li><a href="/husky_experience?article={{ article.slug }}">{{ article.title }}</a></li>
                    {% endfor %}
                </ul>
            {% endif %}

        </div>

        <div class="col-md-4">
            <div class="myuw-canvas myuw-article-aside">
                <h3 class="myuw-canvas-title">About Thrive Messages</h3>
                <p>Thrive messages are designed to help UW students succeed wherever they are in their University career. The message address four interconnected dimensions of the Husky Experience: Know Yourself, Know the World, Make Your Way, and Make Sense.
                </p>
                <a href="#">Learn more about Thrive and the Husky Experience.</a>
            </div>
        </div>
    </div>

</div>