<div class="container is-fluid">
    <div class="title">Available Story Previews</div>
    <div class="subtitle">Click on a story below to preview it...</div>
    <div class="columns is-multiline">
        {{#each stories}}
        <div class="column is-one-third">
            <div class="card">
                <div class="card-image">
                    <figure class="image is4by3">
                        <img src="{{image}}"
                            alt="">
                    </figure>
                </div>
                <div class="card-content">
                    <div class="media">
                        <div class="media-content">
                            <div class="title is-4">{{title}}</div>
                            <div class="subtitle is-6">{{storyKey}}</div>
                            {{#if description}}
                            <div class="content">
                                {{description}}
                            </div>
                            {{/if}}
                        </div>
                    </div>
                </div>
                <footer class="card-footer">
                    <div class="card-footer-item">
                        {{#if episodes}}
                            <table class="table">
                                <tr>
                                    <td>
                                        <a class="button is-primary"
                                            href="{{previewUrl}}"
                                            target="_blank">
                                            <span>Preview Default Episode</span>
                                            <span class="icon">
                                                <i class="fa fa-arrow-right"></i>
                                            </span>
                                        </a>
                                    </td>
                                </tr>
                                {{#each episodes}}
                                    <tr>
                                        <td>
                                        <a class="button is-primary"
                                            href="{{episodePreviewUrl}}"
                                            target="_blank">
                                            <span>Preview Episode: {{name}}</span>
                                            <span class="icon">
                                                <i class="fa fa-arrow-right"></i>
                                            </span>
                                        </a>
                                        <td>
                                    <tr>
                                {{/each}}
                            </table>
                        {{else}}
                        <a class="button is-primary is-large"
                            href="{{previewUrl}}"
                            target="_blank">
                            <span>Preview</span>
                            <span class="icon">
                                <i class="fa fa-arrow-right"></i>
                            </span>
                        </a>
                        {{/if}}

                    </div>
                </footer>
            </div>
        </div>
        {{/each}}
    </div>
</div>