{%- extends "layout.html" %}
{% block hero %}
    <div class="container">
        <div class="hero-body">
            <div class="columns is-vcentered">
                <div class="column">
                    <p class="title">
                        {{ resource.title }}
                    </p>
                    {% if resource.props.subheading %}
                        <p class="subtitle">
                            {{ resource.props.subheading }}
                        </p>
                    {% endif %}
                </div>
                {% set feature = resource.featured_resource(resources) %}
                {% if feature %}
                    <div class="column is-one-third is-hidden-mobile">
                        <div class="card kb-featured">
                            <header class="card-header">
                                <p class="card-header-title">
                                    Featured
                                </p>
                            </header>

                            <div class="card-content">
                                <div class="content">
                                    <a href="{{ pathto(feature.docname, 1) }}">{{ feature.title }}</a>
                                </div>
                                <div class="content is-small">
                                    {{ feature.excerpt }}
                                    <div>
                                        <a href="{{ pathto(feature.docname, 1) }}">read...</a>
                                        <small>{{ feature.props.published }}</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}
{% block body %}
    <div class="container">
        <div class="columns">
            <div class="column"></div>
            <div class="column is-9 kb-body">
                <div id="kbb-sphinx-body">{{ body }}</div>
            </div>
            <div class="column"></div>
        </div>
    </div>
{% endblock %}
