<template>
    <app-header></app-header>
    <section>
        <div id="push2" class="container-fluid max-width-webkit-fill-available">
            <h1 class="text-center g-py-20">Projects</h1>
            <div class="row">
                <div class="col-12 col-md-12 col-lg-12 g-mb-20">
                    <div class="text-left box-shadow2 border-gray">
                        <a href="#" class="text-decoration-none">
                            <div class="g-px-20 g-py-15 d-flex justify-content-between align-items-center">
                                <div class="text-left">
                                    <div class="g-font-size-14 ellipsis g-color-black mb-0 g-font-weight-600">Redesign WERP, Teams, Project, Reports, dan Clients Dashboard</div>
                                    <span class="g-font-size-14 g-color-orange g-font-weight-500">
                                        <img class="vertical-align-text-top" src="../assets/status-orange.png" alt="pending" width="15">
                                        Status : Pending
                                    </span>
                                    <span class="g-color-gray g-font-size-14">,10 januari 2022, 10:20</span>
                                </div>
                                <div class="dropdown">
                                    <button onclick="myAction()" class="dropbtn trigger-event" data-dropdown="Dropdown1">Action</button>
                                    <div id="myDropdown" class="dropdown-content">
                                        <a href="#pending">Pending</a>
                                        <a href="#onprocess">On Process</a>
                                        <a href="#complete">Complete</a>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <hr class="g-my-0">
                        <a href="#" class="text-decoration-none">
                            <div class="g-px-20 g-py-15 d-flex justify-content-between align-items-center">
                                <div class="text-left">
                                    <div class="g-font-size-14 ellipsis g-color-black mb-0 g-font-weight-600">WERP aset &amp; user</div>
                                    <span class="g-font-size-14 g-color-blue g-font-weight-500">
                                        <img class="vertical-align-text-top" src="../assets/status-blue.png" alt="on process" width="15">
                                        Status : On Process
                                    </span>
                                    <span class="g-color-gray g-font-size-14">,10 januari 2022, 10:20</span>
                                </div>
                                <div class="dropdown">
                                    <button onclick="myAction()" class="dropbtn">Action</button>
                                    <div id="myDropdown" class="dropdown-content">
                                        <a href="#pending">Pending</a>
                                        <a href="#onprocess">On Process</a>
                                        <a href="#complete">Complete</a>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <hr class="g-my-0">
                        <a href="#" class="text-decoration-none">
                            <div class="g-px-20 g-py-15 d-flex justify-content-between align-items-center">
                                <div class="text-left">
                                    <div class="g-font-size-14 ellipsis g-color-black mb-0 g-font-weight-600">werp login page, admin panel, sidebar</div>
                                    <span class="g-font-size-14 g-color-green g-font-weight-500">
                                        <img class="vertical-align-text-top" src="../assets/status-green.png" alt="on process" width="15">
                                        Status : complete
                                    </span>
                                    <span class="g-color-gray g-font-size-14">,10 januari 2022, 10:20</span>
                                </div>
                                <div class="dropdown">
                                    <button onclick="myAction()" class="dropbtn">Action</button>
                                    <div id="myDropdown" class="dropdown-content">
                                        <a href="#pending">Pending</a>
                                        <a href="#onprocess">On Process</a>
                                        <a href="#complete">Complete</a>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <hr class="g-my-0">
                        <a href="#" class="text-decoration-none">
                            <div class="g-px-20 g-py-15 d-flex justify-content-between align-items-center">
                                <div class="text-left">
                                    <div class="g-font-size-14 ellipsis g-color-black mb-0 g-font-weight-600">update Web GTI</div>
                                    <span class="g-font-size-14 g-color-green g-font-weight-500">
                                        <img class="vertical-align-text-top" src="../assets/status-green.png" alt="on process" width="15">
                                        Status : complete
                                    </span>
                                    <span class="g-color-gray g-font-size-14">,10 januari 2022, 10:20</span>
                                </div>
                                <div class="dropdown">
                                    <button onclick="myAction()" class="dropbtn">Action</button>
                                    <div id="myDropdown" class="dropdown-content">
                                        <a href="#pending">Pending</a>
                                        <a href="#onprocess">On Process</a>
                                        <a href="#complete">Complete</a>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <hr class="g-my-0">
                        <a href="#" class="text-decoration-none">
                            <div class="g-px-20 g-py-15 d-flex justify-content-between align-items-center">
                                <div class="text-left">
                                    <div class="g-font-size-14 ellipsis g-color-black mb-0 g-font-weight-600">Library &amp; component web</div>
                                    <span class="g-font-size-14 g-color-green g-font-weight-500">
                                        <img class="vertical-align-text-top" src="../assets/status-green.png" alt="on process" width="15">
                                        Status : complete
                                    </span>
                                    <span class="g-color-gray g-font-size-14">,10 januari 2022, 10:20</span>
                                </div>
                                <div class="dropdown">
                                    <button onclick="myAction()" class="dropbtn">Action</button>
                                    <div id="myDropdown" class="dropdown-content">
                                        <a href="#pending">Pending</a>
                                        <a href="#onprocess">On Process</a>
                                        <a href="#complete">Complete</a>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<style scoped>
a {
    color: #ff6d00;
}
.dropbtn {
    background-color: #ffffff;
    color: #ff6d00;
    padding: 10px 40px;
    font-size: 16px;
    border: 1px solid #ff6d00;
    border-radius: 10px;
    cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
    background-color: #ff6d00;
    color: #ffffff;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown a:hover {
    background-color: #ff6d00;
    color: #ffffff;
}
.show {
    display: block;
}
</style>

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

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