<div ng-if="stories.length < 1" style="text-align: center">
    <br><br>
    <h3>There are no stories for this sketch.</h3>
    <button class="btn btn-success" ng-click="createStory()"><i class="fa fa-plus"></i> Create new story</button>
</div>

<div ng-if="stories.length > 0">
    <div class="card-header">
        <h4 class="pull-left">Stories</h4>
        <button class="btn btn-link pull-right" ng-click="createStory()"><i class="fa fa-plus"></i> Create new story</button>
    </div>
    <table ng-if="stories.length > 0" class="table table-hover">
        <thead>
        <tr>
            <th></th>
            <th width="110px">Author</th>
            <th width="130px">Added</th>
        </tr>
        </thead>
        <tbody>

        <tr ng-repeat="story in stories">
            <td><a href="/sketch/{{ sketchId }}/stories/{{ story.id }}/"><b>{{ story.title||'Untitled story' }}</b></a></td>
            <td>{{ story.user.username }}</td>
            <td>{{ story.created_at }}</td>
        </tr>
    </table>
</div>