<link rel="import" href="../../bower_components/polymer/polymer.html"/>
<link rel="import" href="../../bower_components/paper-card/paper-card.html"/>
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"/>
<link rel="import" href="../../bower_components/paper-button/paper-button.html"/>
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html"/>
<link rel="import" href="../../bower_components/iron-collapse/iron-collapse.html"/>


<dom-module id="cocreation-paper-card-controllet">

    <template>
        <style>

            iron-icon{
                padding-left: 5px;
                padding-right: 5px;
                --iron-icon-height: 16px;
                --iron-icon-width: 16px;
            }

            iron-icon.icon-from{
                --iron-icon-fill-color : #000000;
            }

            iron-icon.icon-to{
                --iron-icon-fill-color : #ff0000;
            }

            paper-card.cocreation {
                width: 310px;
            }

            .from, .to {
                font-size: 13px;
                color: #CCCCCC;
            }

            .rate-content {
                @apply(--layout-flex);
                float: left;
                width: 100%;
            }

            .rate-header { @apply(--paper-font-headline); }
            .rate-name { color: var(--paper-grey-600); margin: 10px 0; }

            paper-icon-button.rate-icon {
                --iron-icon-fill-color: white;
                --iron-icon-stroke-color: var(--paper-grey-600);
            }

            .collapse-content {
                width: 200px;
                padding: 15px;
            }

            iron-collapse.iron-collapse-over
            {
                position: absolute;
                left: -1px;
                margin:0;
                padding:0;
                z-index:10;
                background-color: #FFFFFF;
                border: solid 1px #E6E6E6;
                border-top: none !important;
                min-width: 310px;
                min-height: 188px;
            }
        </style>


        <paper-card class="cocreation">
            <div class="rate-content">
                <div class="card-content">
                    <div class="rate-header">{{name}}</div>
                    <div class="rate-name">{{owner}}</div>
                    <div>
                        <iron-icon class="icon-from" icon="alarm"></iron-icon>
                        <span class="from">{{from}}</span>
                        <iron-icon class="icon-to" icon="alarm-off"></iron-icon>
                        <span class="to">{{to}}</span>
                    </div>
                </div>
                <div class="card-actions">
                    <paper-button on-click="_onExplore">Explore</paper-button>
                    <paper-icon-button icon="expand-less" on-click="_toggle" style="float:right;">
                    </paper-icon-button>
                    <iron-collapse class="iron-collapse-over" id="more_info" no-animation>
                        <div class="collapse-content">
                            {{goal}}
                        </div>
                    </iron-collapse>
                </div>
            </div>
        </paper-card>

    </template>

    <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>

    <script>
        Polymer({
            is: "cocreation-paper-card-controllet",

            properties: {
                name:{
                    type: String,
                    value: "text"
                },
                owner:{
                    type: String,
                    value: "text"
                },
                from:{
                    type: String,
                    value: "text"
                },
                to:{
                    type: String,
                    value: "text"
                },
                goal:{
                    type: String,
                    value: "text"
                },
                roomUrl: {
                    type: String,
                    value: undefined
                }
            },

            attached: function(){
            },

            _toggle: function(){
                var moreInfo = this.$.more_info;
                var iconButton = Polymer.dom(event).localTarget;
                iconButton.icon = moreInfo.opened ? 'expand-less' : 'expand-more';
                moreInfo.toggle();
            },

            _onExplore: function(e){
                window.location = this.roomUrl;
            }

        })
    </script>

</dom-module>