<template>
    <app-header></app-header>
    <section>
        <div id="push2" class="container-fluid max-width-webkit-fill-available">
            <h1 class="text-center g-py-20">Reports</h1>
            <div class="row">
                <div class="text-right col-12 col-md-12 col-lg-12 g-mb-20">
                    <router-link to="/reports/tambahreports" class="btn btn-md btn-orange">
                        Tambah Reports
                    </router-link>
                </div>
                <div class="col-12 col-md-12 col-lg-12">
                    <a href="#" class="text-decoration-none">
                    <div class="g-pl-10 g-py-15 border reports-hover">
                        <div class="text-left">
                        <div class="g-font-size-14 ellipsis g-color-black mb-0 g-font-weight-600">Werp login page done</div>
                        <span class="g-font-size-14 g-color-gray g-font-weight-500">16:10, 31 desember 2021</span>
                        <span class="float-right g-font-size-14 g-mr-10">View Reports ></span>
                        </div>
                    </div>
                    </a>
                    <hr class="g-my-0">
                    <a href="#" class="text-decoration-none">
                    <div class="g-pl-10 g-py-15 border reports-hover">
                        <div class="text-left">
                        <div class="g-font-size-14 ellipsis g-color-black mb-0 g-font-weight-600">update web GTI done</div>
                        <span class="g-font-size-14 g-color-gray g-font-weight-500">16:00, 30 desember 2021</span>
                        <span class="float-right g-font-size-14 g-mr-10">View Reports ></span>
                        </div>
                    </div>
                    </a>
                    <hr class="g-my-0">
                    <a href="#" class="text-decoration-none">
                    <div class="g-pl-10 g-py-15 border reports-hover">
                        <div class="text-left">
                        <div class="g-font-size-14 ellipsis g-color-black mb-0 g-font-weight-600">component web done</div>
                        <span class="g-font-size-14 g-color-gray g-font-weight-500">16:15, 29 desember 2021</span>
                        <span class="float-right g-font-size-14 g-mr-10">View Reports ></span>
                        </div>
                    </div>
                    </a>
                    <hr class="g-my-0">
                    <a href="#" class="text-decoration-none">
                    <div class="g-pl-10 g-py-15 border reports-hover">
                        <div class="text-left">
                        <div class="g-font-size-14 ellipsis g-color-black mb-0 g-font-weight-600">styling web</div>
                        <span class="g-font-size-14 g-color-gray g-font-weight-500">16:30, 28 desember 2021</span>
                        <span class="float-right g-font-size-14 g-mr-10">View Reports ></span>
                        </div>
                    </div>
                    </a>
                    <hr class="g-my-0">
                    <a href="#" class="text-decoration-none">
                    <div class="g-pl-10 g-py-15 border reports-hover">
                        <div class="text-left">
                        <div class="g-font-size-14 ellipsis g-color-black mb-0 g-font-weight-600">Mockup Done</div>
                        <span class="g-font-size-14 g-color-gray g-font-weight-500">16:11, 27 desember 2021</span>
                        <span class="float-right g-font-size-14 g-mr-10">View Reports ></span>
                        </div>
                    </div>
                    </a>
                </div>
            </div>
        </div>
    </section>
</template>

<style scoped>
a {
    color: #ff6d00;
}
.reports-hover:hover {
    background-color: #eaeaea !important;
}
</style>

<script>
import Header from './Header.vue'

export default {
    components: {
        'app-header': Header
    },
}
</script>