<commit_before>{% extends 'AppBundle:Layout:base+drawer.html.twig' %}

{% block links %}
    {{ parent() }}
    <link rel="import" href="/bower_components/core-header-panel/core-header-panel.html">
    <link rel="import" href="/bower_components/core-toolbar/core-toolbar.html">
    <link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html"/>

    <link rel="import" href="/bower_components/hateoas-ajax/hateoas-ajax.html"/>
    <link rel="import" href="/bower_components/core-animated-pages/core-animated-pages.html"/>

    <link rel="import" href="/bower_components/core-list/core-list.html"/>
    <link rel="import" href="/bower_components/paper-item/paper-item.html"/>
    <link rel="import" href="/bower_components/core-image/core-image.html"/>

    <link rel="import" href="/bower_components/paper-input/paper-input.html"/>
{% endblock links %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        #person-list core-image {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 8px;
            background-color: lightgray;
        }

        #person-detail core-image {
            width: 128px;
            height: 128px;
            border-radius: 50%;
            margin-right: 16px;
            background-color: lightgray;
        }

        #person-detail-card {
            padding: .9em 1em;
        }

        #toolbar-pages {
            margin: 0;
        }

        #toolbar-pages > section > * {
            margin: 0 8px;
        }
    </style>
{% endblock stylesheets %}

{% block content %}
    {% import 'Nemo64PolymerBundle::common.html.twig' as polymer %}

    <hateoas-ajax auto url="{{ path('get_people') }}" handleAs="json"
                  response="{{ polymer.var('people') }}"></hateoas-ajax>

    <core-header-panel fit mode="{{ block('header_mode') }}">
        <core-toolbar hero hero-id="toolbar">
            <core-animated-pages id="toolbar-pages"
                                 fit selected="{{ polymer.var('personPage') }}"
                                 transitions="hero-transition cross-fade">

                <section layout horizontal center>
                    <paper-icon-button icon="menu" core-drawer-toggle
                                       cross-fade></paper-icon-button>
                    <div flex hero hero-id="header">Kontakte</div>
                </section>
                <section layout horizontal center>
                    <paper-icon-button icon="arrow-back" on-tap="{{ polymer.var('selectPerson') }}"
                                       cross-fade></paper-icon-button>
                    <div flex hero hero-id="header">{{ polymer.var('selectedPerson.name.complete') }}</div>
                </section>

            </core-animated-pages>
        </core-toolbar>

        <core-animated-pages fit selected="{{ polymer.var('personPage') }}"
                             transitions="hero-transition cross-fade">

            <section id="person-list">

                <core-list fit data="{{ polymer.var('people') }}">
                    <template>
                        <paper-item noink on-tap="{{ polymer.var('selectPerson') }}"
                                    data-index="{{ polymer.var('index') }}">

                            <div flex layout horizontal center>
                                <core-image sizing="cover"
                                            src="http://lorempixel.com/128/128/?{{ polymer.var('model_.id') }}"
                                            hero?="{{ polymer.var('selectedPerson === model_') }}"
                                            hero-id="person-{{ polymer.var('model_.id') }}-image"
                                            cross-fade?="{{ polymer.var('selectedPerson !== model_') }}">
                                </core-image>
                                <div hero?="{{ polymer.var('selectedPerson === model_') }}"
                                     hero-id="person-{{ polymer.var('model_.id') }}-name"
                                     cross-fade?="{{ polymer.var('selectedPerson !== model_') }}">
                                    {{ polymer.var('model_.name.complete') }}
                                </div>
                            </div>

                        </paper-item>
                    </template>
                </core-list>

            </section>

            <section id="person-detail">

                <div id="person-detail-card" fit>
                    <div layout horizontal>

                        <core-image sizing="cover"
                                    src="http://lorempixel.com/128/128/?{{ polymer.var('selectedPerson.id') }}"
                                    hero hero-id="person-{{ polymer.var('selectedPerson.id') }}-image">
                        </core-image>
                        <div layout vertical start>
                            <div layout horizontal>
                                <h1 hero hero-id="person-{{ polymer.var('selectedPerson.id') }}-name">
                                    {{ polymer.var('selectedPerson.name.complete') }}
                                </h1>
                            </div>
                            <div cross-fade>
                                Firmen:
                                <ul>
                                    <template
                                            repeat="{{ polymer.varIn('company', 'selectedPerson.employedByCompanies') }}">
                                        <li>{{ polymer.var('company.name') }}</li>
                                    </template>
                                </ul>
                            </div>
                            <form cross-fade layout vertical
                                  action="" on-submit="{{ polymer.var('submitPerson') }}">
                                <div>
                                    <paper-input label="Freitext"
                                                 value="{{ polymer.var('selectedPerson.freeText') }}"></paper-input>
                                </div>
                                <div>
                                    <paper-input label="Prefix"
                                                 value="{{ polymer.var('selectedPerson.name.prefix') }}"></paper-input>
                                </div>
                                <div>
                                    <paper-input label="Vorname"
                                                 value="{{ polymer.var('selectedPerson.name.first') }}"></paper-input>
                                    <paper-input label="Zweiter Vorname"
                                                 value="{{ polymer.var('selectedPerson.name.second') }}"></paper-input>
                                    <paper-input label="Nachname"
                                                 value="{{ polymer.var('selectedPerson.name.last') }}"></paper-input><commit_msg>split name in output to get live updates<commit_after>{% extends 'AppBundle:Layout:base+drawer.html.twig' %}

{% block links %}
    {{ parent() }}
    <link rel="import" href="/bower_components/core-header-panel/core-header-panel.html">
    <link rel="import" href="/bower_components/core-toolbar/core-toolbar.html">
    <link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html"/>

    <link rel="import" href="/bower_components/hateoas-ajax/hateoas-ajax.html"/>
    <link rel="import" href="/bower_components/core-animated-pages/core-animated-pages.html"/>

    <link rel="import" href="/bower_components/core-list/core-list.html"/>
    <link rel="import" href="/bower_components/paper-item/paper-item.html"/>
    <link rel="import" href="/bower_components/core-image/core-image.html"/>

    <link rel="import" href="/bower_components/paper-input/paper-input.html"/>
{% endblock links %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        #person-list core-image {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 8px;
            background-color: lightgray;
        }

        #person-detail core-image {
            width: 128px;
            height: 128px;
            border-radius: 50%;
            margin-right: 16px;
            background-color: lightgray;
        }

        #person-detail-card {
            padding: .9em 1em;
        }

        #toolbar-pages {
            margin: 0;
        }

        #toolbar-pages > section > * {
            margin: 0 8px;
        }
    </style>
{% endblock stylesheets %}

{% block content %}
    {% import 'Nemo64PolymerBundle::common.html.twig' as polymer %}

    <hateoas-ajax auto url="{{ path('get_people') }}" handleAs="json"
                  response="{{ polymer.var('people') }}"></hateoas-ajax>

    <core-header-panel fit mode="{{ block('header_mode') }}">
        <core-toolbar hero hero-id="toolbar">
            <core-animated-pages id="toolbar-pages"
                                 fit selected="{{ polymer.var('personPage') }}"
                                 transitions="hero-transition cross-fade">

                <section layout horizontal center>
                    <paper-icon-button icon="menu" core-drawer-toggle
                                       cross-fade></paper-icon-button>
                    <div flex hero hero-id="header">Kontakte</div>
                </section>
                <section layout horizontal center>
                    <paper-icon-button icon="arrow-back" on-tap="{{ polymer.var('selectPerson') }}"
                                       cross-fade></paper-icon-button>
                    <div flex hero hero-id="header">{{ polymer.var('selectedPerson.name.complete') }}</div>
                </section>

            </core-animated-pages>
        </core-toolbar>

        <core-animated-pages fit selected="{{ polymer.var('personPage') }}"
                             transitions="hero-transition cross-fade">

            <section id="person-list">

                <core-list fit data="{{ polymer.var('people') }}">
                    <template>
                        <paper-item noink on-tap="{{ polymer.var('selectPerson') }}"
                                    data-index="{{ polymer.var('index') }}">

                            <div flex layout horizontal center>
                                <core-image sizing="cover"
                                            src="http://lorempixel.com/128/128/?{{ polymer.var('model_.id') }}"
                                            hero?="{{ polymer.var('selectedPerson === model_') }}"
                                            hero-id="person-{{ polymer.var('model_.id') }}-image"
                                            cross-fade?="{{ polymer.var('selectedPerson !== model_') }}">
                                </core-image>
                                <div hero?="{{ polymer.var('selectedPerson === model_') }}"
                                     hero-id="person-{{ polymer.var('model_.id') }}-name"
                                     cross-fade?="{{ polymer.var('selectedPerson !== model_') }}">
                                    {{ polymer.var('model_.name.complete') }}
                                </div>
                            </div>

                        </paper-item>
                    </template>
                </core-list>

            </section>

            <section id="person-detail">

                <div id="person-detail-card" fit>
                    <div layout horizontal>

                        <core-image sizing="cover"
                                    src="http://lorempixel.com/128/128/?{{ polymer.var('selectedPerson.id') }}"
                                    hero hero-id="person-{{ polymer.var('selectedPerson.id') }}-image">
                        </core-image>
                        <div layout vertical start>
                            <div layout horizontal>
                                <h1 hero hero-id="person-{{ polymer.var('selectedPerson.id') }}-name">
                                    {{ polymer.var('selectedPerson.name.prefix') }}
                                    {{ polymer.var('selectedPerson.name.first') }}
                                    {{ polymer.var('selectedPerson.name.second') }}
                                    {{ polymer.var('selectedPerson.name.last') }}
                                    {{ polymer.var('selectedPerson.name.suffix') }}
                                </h1>
                            </div>
                            <div cross-fade>
                                Firmen:
                                <ul>
                                    <template
                                            repeat="{{ polymer.varIn('company', 'selectedPerson.employedByCompanies') }}">
                                        <li>{{ polymer.var('company.name') }}</li>
                                    </template>
                                </ul>
                            </div>
                            <form cross-fade layout vertical
                                  action="" on-submit="{{ polymer.var('submitPerson') }}">
                                <div>
                                    <paper-input label="Freitext"
                                                 value="{{ polymer.var('selectedPerson.freeText') }}"></paper-input>
                                </div>
                                <div>
                                    <paper-input label="Prefix"
                                                 value="{{ polymer.var('selectedPerson.name.prefix') }}"></paper-input>
                                </div>
                                <div>
                                    <paper-input label="Vorname"
                                                 value="{{ polymer.var('selectedPerson.name.first') }}"></paper-input>
                                    <paper-input label="Zweiter Vorname"
                                                 value="{{ polymer.var('selectedPerson.name.second') }}"></paper-input>
                                    <paper-input label="Nachname"
                                                 value="{{ polymer.var('selectedPerson.name.last') }}"></paper-input>
{'fraction_non_alphanumeric': 0.13745656706045864, 'fraction_numerical': 0.005281445448227936, 'mean_word_length': 1.1601621134794355, 'pattern_counts': {'":': 0, '<': 161, '<?xml version=': 0, '>': 165, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 90, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4328401', 'n_tokens_mistral': 3596, 'n_tokens_neox': 3270, 'n_words': 562}