{% extends 'app/base.html'%}

{% block toast %}
{% if messages %}
    {% for message in messages%}
    <div class="toast container">
        <div class="columns">
            <div class="column col-9 col-mx-auto">
                <button class="btn btn-clear float-right"></button>
                {{ message | escape }}
            </div>
        </div>
    </div>
    {% endfor %}
{% endif %}
{% endblock %}

{% block content %}
<div ng-controller="ResourceList.ctrl">
    <div class="tools columns">
        <div class="column col-9 col-lg-12 col-mx-auto">
            <div class="columns">
                <div class="column col-12">
                    <button type="button" ng-disabled="is_creating_resource" ng-click="createResource()" id="new-resource-btn" class="btn btn-primary icon-and-text"><i class="ion ion-plus"></i>New Resource</button>
                </div>
            </div>
        </div>
    </div>
    <div id="resource_list" class="columns">
        <!-- resource list -->
        <div class="resource column col-9 col-lg-12 col-mx-auto" ng-repeat="resource in resources">
            <div class="resource_head" ng-if="_mtarget.id != resource.id">
                <h4 ng-bind="resource.name"></h4>
                <span ng-bind="resource.url">/</span>
                <button type="button" ng-if="resource.id != 1" ng-click="prepareToModify($index)" data-tooltip="Modify this resource." class="btn tooltip"><i class="ion ion-compose"></i></button>
                <a href="#deleteModal" ng-if="resource.id != 1" ng-click="askDelete($index)" data-tooltip="Delete this resource." class="btn tooltip"><i class="ion ion-trash-a"></i></a>
            </div>
            <div class="create_resource_head columns" ng-if="_mtarget.id == resource.id">
                <div class="col-3 col-sm-12">
                    <input type="text" class="form-input new-resource-input" ng-model="_mtarget.name" placeholder="New Resource!">
                </div>
                <div class="col-2 col-sm-12">
                    <input type="text" class="form-input new-url-input" ng-model="_mtarget.url" placeholder="type url here.">
                </div>
                <div class="col-7 col-sm-12">
                    <button type="button" class="btn btn-primary icon-and-text" ng-click="modify($index)"><i class="ion ion-compose"></i>Save</button>
                    <button type="button" class="btn icon-and-text" ng-click="cancelModifying()"><i class="ion ion-close"></i>Cancel</button>
                </div>
            </div>
            <div class="divider"></div>
            <div class="action_list columns">
                <div class="column col-3 col-lg-6 col-sm-12" ng-repeat="action in resource.actions">
                    <a href="/motty/action/[[ action.id ]]/view" class="card tooltip tooltip-top" data-tooltip="[[ action.contentType ]]">
                        <div class="card-header">
                            <div class="card-title h5" ng-bind="action.name"></div>
                            <div class="card-subtitle url">[[ resource.url ]][[ action.url ]]</div>
                        </div>
                        <div class="columns card-footer">
                            <div class="col-9">
                                <div class="card-tags">
                                    <span class="chip" ng-bind="action.method"></span>
                                    <span class="chip" ng-bind="action.readableType"></span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="column col-3 col-lg-6 col-sm-12">
                    <a href="/motty/resource/[[ resource.id ]]/action/create" class="card create-new-card">
                        <div class="card-header">
                            <i class="ion ion-plus"></i>
                            <h4>Create new url</h4>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!-- // resource list end -->
        <!-- resource creation form -->
        <div class="resource column col-9 col-sm-12 col-mx-auto" ng-if="is_creating_resource">
            <div class="create_resource_head columns">
                <div class="col-3 col-sm-12">
                    <input type="text" class="form-input new-resource-input" ng-model="newResource.name" placeholder="New Resource!">
                </div>
                <div class="col-2 col-sm-12">
                    <input type="text" class="form-input new-url-input" ng-model="newResource.url" placeholder="type url here.">
                </div>
                <div class="col-7 col-sm-12">
                    <button type="button" class="btn btn-primary icon-and-text" ng-click="saveNewResource()"><i class="ion ion-compose"></i>Save</button>
                    <button type="button" class="btn icon-and-text" ng-click="cancelCreating()"><i class="ion ion-close"></i>Cancel</button>
                </div>
            </div> 
            <div class="divider"></div>
        </div>
        <!-- // resource creation form end -->
    </div>
    <!-- resource delete modal -->
    <div id="deleteModal" class="modal">
        <a href="/" class="modal-overlay" aria-label="Close"></a>
        <div class="modal-container">
            <div class="modal-header">
                <a href="/" class="btn btn-clear float-right" aria-label="Close"></a>
                <div class="modal-title h5">Delete Resource</div>
            </div>
            <div class="modal-body">
                <div class="content">
                    <b>Are you sure you want to delete <span class="text-primary" ng-bind="_dtarget.name"></span> resource? </b><br>
                    <span class="text-gray">All actions belong to [[ _dtarget.name ]] resource will be deleted.</span>
                </div>
            </div>
            <div class="modal-footer">
                <a href="/motty/api/resource/[[ _dtarget.id ]]/delete" class="btn btn-primary icon-and-text"><ion class="ion ion-trash-a"></ion>Yes, Delete</a>
                <a href="/" class="btn icon-and-text"><ion class="ion ion-close"></ion>No</a>
            </div>
        </div>
    </div>
    <!-- // resource delete modal end -->
</div>
{% endblock %}