<polymer-element name="my-summary-element" attributes="players name">
    <template>
        <style>
            .pic {
                width: 30px;
                height: 30px;
            }
        </style>
        <div class="infoboard">
            <h2>{{name}} ist dran!</h2>
            <table class="table table-striped">
                <tr>
                    <th>Figur</th>
                    <th>Spielername</th>
                    <th>Budget</th>
                    <th>Besitz</th>
                    <th>Position</th>
                    <th>Gefaengniskarte</th>
                </tr>

                <template repeat="{{player in allPlayers}}">
                    <tr>
                        <td><img class="pic" ng-src="assets/images/{{player.pic}}.jpg"
                                 src="../assets/images/{{player.pic}}.jpg"/></td>
                        <td>{{player.name}}</td>
                        <td>{{player.budget}}</td>
                        <td>{{player.ownership}}</td>
                        <td>{{player.pos}}</td>
                        <td>{{player.prisoncard}}</td>
                    </tr>
                </template>
            </table>
        </div>
        {{players | ready}}
    </template>
    <script>
        Polymer({
            allPlayers: 0,
            ready: function (data) {
                /* convert string to array with json objects */
                var tmpConvert = eval('[' + data + ']');
                var localArray = [];
                for (var key in tmpConvert) {
                    var obj = tmpConvert[key];
                    for (var prop in obj) {
                        var element = obj[prop];
                        localArray.push(element);
                    }
                }
                this.allPlayers = localArray;
            }
        });
    </script>
</polymer-element>

<!-- my summary element, created with polymer -->
<my-summary-element name="{{currentplayer.name}}" players="{{players}}"></my-summary-element>

    <section class="bettrahmen">
        <div>
            <article>
                ...
            </article>
        </div>
    </section>
    
    <section class="bettgestellt">
        <div>
            <article>
                ...
            </article>
        </div>
    </section>
    <section class="bett">
        <div>
            <article>
                ...
            </article>
        </div>
    </section>