<template>
    <main>
        <!-- Header -->
        <SiteHeader pageId="project-detail" />

        <!-- Page Section -->
        <section class="content">
            <div class="container-fluid">
                <!-- Default box -->
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">{{projectTitle}} Details</h3>

                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
                                <i class="fas fa-minus"></i>
                            </button>

                            <button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 col-md-12 col-lg-8 order-2 order-md-1">
                                <div class="row">
                                    <div class="col-12 col-sm-4">
                                        <div class="info-box bg-light">
                                            <div class="info-box-content">
                                                <span class="info-box-text text-center text-muted">Estimated budget</span>
                                                <span class="info-box-number text-center mb-0">2300</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-sm-4">
                                        <div class="info-box bg-light">
                                            <div class="info-box-content">
                                                <span class="info-box-text text-center text-muted">Total amount spent</span>
                                                <span class="info-box-number text-center mb-0">2000</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-sm-4">
                                        <div class="info-box bg-light">
                                            <div class="info-box-content">
                                                <span class="info-box-text text-center text-muted">Estimated project duration</span>
                                                <span class="info-box-number text-center mb-0">20</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-12">
                                        <h4>Recent Activity</h4>
                                        <div class="post">
                                            <div class="user-block">
                                                <img class="img-circle img-bordered-sm" src="@/assets/img/user1-128x128.jpg" alt="user image">
                                                <span class="username">
                                                    <a href="javascript://">Jonathan Burke Jr.</a>
                                                </span>
                                                <span class="description">Shared publicly - 7:45 PM today</span>
                                            </div>
                                            <!-- /.user-block -->
                                            <p>
                                                Lorem ipsum represents a long-held tradition for designers,
                                                typographers and the like. Some people hate it and argue for
                                                its demise, but others ignore.
                                            </p>

                                            <p>
                                                <a href="javascript://" class="link-black text-sm"><i class="fas fa-link mr-1"></i> Demo File 1 v2</a>
                                            </p>
                                        </div>

                                        <div class="post clearfix">
                                            <div class="user-block">
                                                <img class="img-circle img-bordered-sm" src="@/assets/img/user7-128x128.jpg" alt="User Image">
                                                <span class="username">
                                                    <a href="javascript://">Sarah Ross</a>
                                                </span>
                                                <span class="description">Sent you a message - 3 days ago</span>
                                            </div>
                                            <!-- /.user-block -->
                                            <p>
                                                Lorem ipsum represents a long-held tradition for designers,
                                                typographers and the like. Some people hate it and argue for
                                                its demise, but others ignore.
                                            </p>

                                            <p>
                                                <a href="javascript://" class="link-black text-sm"><i class="fas fa-link mr-1"></i> Demo File 2</a>
                                            </p>
                                        </div>

                                        <div class="post">
                                            <div class="user-block">
                                                <img class="img-circle img-bordered-sm" src="@/assets/img/user1-128x128.jpg" alt="user image">
                                                <span class="username">
                                                    <a href="javascript://">Jonathan Burke Jr.</a>
                                                </span>

                                                <span class="description">Shared publicly - 5 days ago</span>
                                            </div>
                                            <!-- /.user-block -->

                                            <p>
                                                Lorem ipsum represents a long-held tradition for designers,
                                                typographers and the like. Some people hate it and argue for
                                                its demise, but others ignore.
                                            </p>

                                            <p>
                                                <a href="javascript://" class="link-black text-sm"><i class="fas fa-link mr-1"></i> Demo File 1 v1</a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-md-12 col-lg-4 order-1 order-md-2">
                                <h3 class="text-primary"><i class="fas fa-tasks"></i> {{projectTitle}} Tasks</h3>

                                <p class="text-muted">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terr.</p>

                                <br>

                                <div class="text-muted">
                                    <p class="text-sm">Client Company
                                        <b class="d-block">Deveint Inc</b>
                                    </p>
                                    <p class="text-sm">Project Leader
                                        <b class="d-block">Tony Chicken</b>
                                    </p>
                                </div>

                                <h5 class="mt-5 text-muted">Project files</h5>
                                <ul class="list-unstyled">
                                    <li>
                                        <a href="" class="btn-link text-secondary"><i class="far fa-fw fa-file-word"></i> Functional-requirements.docx</a>
                                    </li>
                                    <li>
                                        <a href="" class="btn-link text-secondary"><i class="far fa-fw fa-file-pdf"></i> UAT.pdf</a>
                                    </li>
                                    <li>
                                        <a href="" class="btn-link text-secondary"><i class="far fa-fw fa-envelope"></i> Email-from-flatbal.mln</a>
                                    </li>
                                    <li>
                                        <a href="" class="btn-link text-secondary"><i class="far fa-fw fa-image "></i> Logo.png</a>
                                    </li>
                                    <li>
                                        <a href="" class="btn-link text-secondary"><i class="far fa-fw fa-file-word"></i> Contract-10_12_2014.docx</a>
                                    </li>
                                </ul>
                                <div class="text-center mt-5 mb-3">
                                    <a href="javascript://" class="btn btn-sm btn-primary">Add files</a>
                                    <a href="javascript://" class="btn btn-sm btn-warning">Report contact</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.card-body -->

                </div>
                <!-- /.card -->
            </div>
        </section>
    </main>
</template>

<script>
export default {
    data: () => {
        return {
            projectId: null,
            projectTitle: null,
        }
    },
    methods: {
        //
    },
    mounted: function () {
        /* Set project id. */
        this.projectId = this.$route.params.projectId

        /* Set project title. */
        this.projectTitle = 'APECS'
    },
}
</script>
