{{ define "content" }}
<nav>
    <div class="nav-wrapper container">
        <a href="/" class="brand-logo">S3 Manager</a>
    </div>
</nav>

<div class="container">
    <div class="section">
        <div class="row">

            {{ if .Buckets }}
            {{ range $bucket := .Buckets }}
            <div class="col l6 m12">
                <a href="/buckets/{{ $bucket.Name }}" style="color:black;">
                    <div class="card">
                        <div class="card-content">
                            <div class="row">
                                <div class="col">
                                    <i class="material-icons large">folder_open</i>
                                </div>
                                <div class="col">
                                    <span class="card-title">
                                        {{ $bucket.Name }}
                                    </span>
                                    <p style="color:gray;">Created on {{ $bucket.CreationDate }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            {{ end }}
            {{ end }}

            {{ if not .Buckets }}
            <p style="text-align:center;margin-top:2em;color:gray;">No buckets yet</p>
            {{ end }}

        </div>
    </div>
</div>

<div class="fixed-action-btn">
    <button type="button" class="btn-floating btn-large red modal-trigger" data-target="modal-create-bucket">
        <i class="material-icons large">add</i>
    </button>
</div>

<div id="modal-create-bucket" class="modal">
    <form id="create-bucket-form">
        <div class="modal-content">
            <h4>Create Bucket</h4>
            <br>
            <div class="row">
                <div class="input-field col m6">
                    <input id="name" type="text" name="name" placeholder="My Bucket">
                    <label for="name">Name</label>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <button type="button" class="modal-close waves-effect waves-green btn-flat">Cancel</button>
            <button type="button" class="modal-close waves-effect waves-green btn" onclick="createBucket()">Create</button>
        </div>
    </form>
</div>

<script>
    function createBucket() {
        var formData = {};
        $.each($('#create-bucket-form')
            .serializeArray(), function(i, field) {
                formData[field.name] = field.value;
            });
        $.ajax({
            type: 'POST',
            url: '/api/buckets',
            data: JSON.stringify(formData),
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function() { location.reload(); }
        });
    }
</script>
{{ end }}