<template>
    <div class="d-flex" id="wrapper">

        <!-- Sidebar -->
        <!--<div class="bg-light border-right" id="sidebar-wrapper">-->
        <!--&lt;!&ndash;<div class="sidebar-heading">Menu </div>&ndash;&gt;-->
        <!--<div class="list-group list-group-flush">-->
        <!--<a href="#" class="list-group-item list-group-item-action bg-light">Search</a>-->
        <!--<a href="#" class="list-group-item list-group-item-action bg-light">Columns</a>-->
        <!--<a href="#" class="list-group-item list-group-item-action bg-light">Filters</a>-->
        <!--<a href="#" class="list-group-item list-group-item-action bg-light">Download</a>-->
        <!--<a href="#" class="list-group-item list-group-item-action bg-light">Contacts</a>-->
        <!--</div>-->
        <!--</div>-->
        <!-- /#sidebar-wrapper -->

        <div id="page-content-wrapper" class="main">
            <fetch-condensate :condensate="condensate">
                <template slot-scope="{response, loading}">
                    <slot :response="response" :loading="loading">
                        <div v-if="loading">Loading...</div>
                        <div v-else>
                          <h2>{{response.data.name}}</h2>
                            <h4 class="round">General Information</h4>
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <div class="container-fluid col-md-12">
                                        <div class="row">
                                            <div class="text col-sm-3">Unique name</div>
                                            <div class="col-sm-9">
                                                {{response.data.unique_name}}
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="text col-sm-3">Species</div>
                                            <div class="col-sm-9">
                                                {{response.data.species_name + ' (' + response.data.species_tax_id + ')'}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

<!--                            <h4 class="round">Experiments</h4>-->
<!--                            {{response.data.experiments}}-->

                            <h4 class="round">Proteins</h4>
                            <llps-table id="protein-table" :data="response.data.proteins">
                            </llps-table>

                            {{response.data.experiments}}
                            <!--<div class="panel panel-default">-->
                                <!--<table class="csi table table-hover table-responsive">-->
                                    <!--<thead>-->
                                    <!--<tr class="active">-->
                                        <!--<th>Name</th>-->
                                        <!--<th>Species</th>-->
                                        <!--<th>Uniprot</th>-->
                                        <!--<th>Sequence</th>-->
                                    <!--</tr>-->
                                    <!--</thead>-->
                                    <!--<tbody>-->
                                    <!--<tr v-for="(item, index) in response.data.llps_ptms" v-bind:key="index">-->
                                        <!--<td class="col-sm-6">{{item.name}}</td>-->
                                        <!--<td>{{item.species_name}}</td>-->
                                        <!--<td>{{item.uniprot_id}}</td>-->
                                        <!--<td>-->
                                            <!--<input type="text" :value="item.sequence">-->
                                            <!--<button class="copy-button" :name="'item.uniprot_id'" :id="'item.uniprot_id'" :data-clipboard-text="item.sequence">Copy</button>-->
                                        <!--</td>-->
                                    <!--</tr>-->
                                    <!--</tbody>-->
                                <!--</table>-->
                            <!--</div>-->

                            <!--<h4 class="round">Additional Information</h4>-->
                            <!--<div class="panel panel-default">-->
                                <!--<div class="panel-body">-->
                                    <!--<div class="row">-->
                                        <!--<div class="text col-sm-3">Proteins</div>-->
                                        <!--<div class="col-sm-9">-->
                                            <!--{{response.data.proteins}}-->
                                        <!--</div>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->
                        </div>
                    </slot>
                </template>
            </fetch-condensate>
        </div>
    </div>
    <!-- /#wrapper -->
</template>

<script>
  import fetchCondensate from '@/components/DDCODE/fetchCondensate.vue'
  import llpsTable from '@/components/LlpsTable.vue'
  const _ = require('lodash')
  require('./js/clipboard')

  export default {
    name: 'LandingPage',
    components: {
      fetchCondensate, llpsTable
    },
    props: ['condensateId'],
    data() {
      return {
        condensate: this.$route.params.condensate,
      }
    },
    computed: {
    },
    methods: {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    @import url('~@/assets/bootstrap.css');
    @import url('~@/assets/datatable.css');
    @import url('~@/assets/tooltip.css');

    .main {
        /*margin-left: 200px;*/
        margin-left: 20px;
    }

    h3 {
        margin: 40px 0 0;
    }

    a {
        color: #42b983;
    }

    #wrapper {
        overflow-x: hidden;
    }

    #sidebar-wrapper {
        min-height: 100vh;
        margin-left: -15rem;
        -webkit-transition: margin .25s ease-out;
        -moz-transition: margin .25s ease-out;
        -o-transition: margin .25s ease-out;
        transition: margin .25s ease-out;

        position: absolute;
        z-index: 1; /* Stay on top */
        left: 0;
    }

    #sidebar-wrapper .sidebar-heading {
        padding: 0.875rem 1.25rem;
        font-size: 1.2rem;
    }

    #sidebar-wrapper .list-group {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        width: 15rem;
    }

    #page-content-wrapper {
        min-width: 100vw;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: 0;
    }

    @media (min-width: 768px) {
        #sidebar-wrapper {
            margin-left: 0;
        }

        #page-content-wrapper {
            min-width: 0;
            width: 100%;
        }

        #wrapper.toggled #sidebar-wrapper {
            margin-left: -15rem;
        }
    }

    .d-flex {
        display: -ms-flexbox !important;
        display: flex !important;
    }

    .panel {
        font-size: 1.2rem;
    }
</style>