<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>


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

    <style>
        :host {
            color: #333;
            font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            display: inline-block;
            margin: 0 8px 8px ;
            font-size: 14px;
            text-align: justify;
            line-height: 10px;
            --paper-fab-background: var(--accent-color);
        }

        paper-material {
            border-radius: 2px;
            background-color: white;
        }

        .picture {
            position: relative;
            margin-bottom: 0px;
        }
        .picture img {
            border-top-right-radius: 2px;
            border-top-left-radius: 2px;
            width: 100%;
        }
        .legend {
            position: absolute;
            background: rgba(0,0,0,0.5);
            bottom: 0;
            color: white;
            height: 40px;
            padding: 0 16px;
            left: 0; right: 0;
        }
        paper-fab {
            position: absolute;
            right: 10px;
            bottom: -18px;
            z-index: 10;
            --paper-fab-background:#2196F3;
        }

        .content ::content {
            padding: 0 16px 8px;
            font-weight: 300;
            color: var(--secondary-text-color);
            line-height: 24px;
        }
        ::content.buttons {
            margin-top: 8px;
        }
        ::content paper-button, ::content paper-icon-button {
            font-weight: 500;
            color: var(--accent-color);
        }

    </style>

    <template>
        <paper-material elevation="{{elevation}}">
            <div class="vertical layout">
                <div class="picture">
                    <img src="{{src}}">
                    <div class="horizontal layout center legend">
                        <span>{{legend}}</span>
                        <paper-fab mini icon="{{icon}}"></paper-fab>
                    </div>
                    </div>
                </div>
                <div class="content">
                    <p>{{text}}</p>
                </div>
            </div>
        </paper-material>
    </template>

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

            properties: {
                width: {
                    type: Number,
                    value: 350,
                    observer: "_changeWidth",
                },
            },
            _changeWidth: function(data){
                this.style.width = data + "px";
                this.querySelector(".content").width = data + "px";
            },
        })
    </script>


</dom-module>