<form name="pledgingForm.form" class="pledging-form" novalidate>

    <div class="finance">

        <div class="alert-box notification push" ng-class="pledgingForm.getNotification().type"
             ng-show="!pledgingForm.generalErrors && pledgingForm.getNotification() != null">
            {{ pledgingForm.getNotification().message }}
        </div>

        <div class="general-error alert-box alert push" ng-messages="pledgingForm.generalErrors"
             ng-if="pledgingForm.generalErrors">
            <span ng-message="remote_pledge_goal_exceeded">
                Das Projekt wurde mittlerweile von anderen Benutzern finanziert und deine Finanzierung hätte den Finanzierungsbedarf des Projekts überschritten.
                Die Projektdaten wurden soeben aktualisiert und wir bitten dich einen neuen Finanzierungsbetrag einzugeben.
            </span>
            <span ng-message="remote_project_already_fully_pledged">
                Das Projekt wurde mittlerweile von anderen Benutzern vollständig finanziert. Ein Finanzieren ist leider nicht mehr möglich.
            </span>
            <span ng-message="remote_project_already_in_financing_round">
                Das Projekt befindet sich bereits in einer Finanzierungsrunde.
            </span>
            <span ng-message="remote_user_budget_exceeded">Dein Budget reicht nicht aus. Bitte versuche es erneut</span>
            <span ng-message="remote_reverse_pledge_exceeded">Du kannst nicht mehr Budget aus dem Projekt abziehen, als Du ursprünglich zugewiesen hast. Versuche es mit einem anderen Betrag.</span>
            <span ng-message="remote_project_not_published">
                Das Projekt ist nicht mehr veröffentlicht. Nur veröffentlichte Projekte können finanziert werden.
            </span>
            <span ng-message="remote_set_to_deferred_not_possible_on_rejected">
                Ein abgelehntes Projekt kann nicht zurückgestellt werden. Bringe es zunächst in den Status 'veröffentlicht' oder 'vorgeschlagen'.
            </span>
            <span ng-message="remote_zero_pledge_not_valid">
                Ein Investment mit dem Wert 0 ist leider nicht zulässig.
            </span>
            <span ng-message="remote_no_financing_round_currently_active">
                Die Finanzierungsrunde ist mittlerweile leider beendet.
                Das Finanzieren ist erst wieder möglich, wenn die nächste Runde gestartet wurde.
            </span>
            <span ng-message="remote_financinground_not_postprocessed">
                Die Finanzierungsrunde ist noch nicht bereit, um nachträgliche Investments aus überschüssigen Budgets anzunehmen.
                Versuche es in einigen Sekunden noch einmal.
            </span>
            <span ng-message="remote_project_not_in_last_financinground">
                Das Projekt nahm nicht an der letzten Finanzierungsrunde teil und kann daher nicht nachfinanziert werden.
            </span>
            <span ng-message="remote_financing_round_budget_exceeded">
                Das Rest-Budget der Finanzierungsrunde reicht nicht aus.
            </span>

            <span ng-message="remote_unknown">Es ist ein Fehler aufgetreten. Bitte versuche es erneut.</span>
        </div>

        <div class="finance__section">
            <range-slider ng-model="pledgingForm.pledge.amount" start="0" reduced="{{ pledgingForm.isReversePledge() }}"
                          end="{{ pledgingForm.getPledgableAmount() }}"
                          disabled="pledgingForm.getPledgableAmount() == 0"
                          init-slider="{{ pledgingForm.initslider }}"></range-slider>

            <ul class="finance__ul">
                <li class="finance__li-important form-controls-amount">
                    <!-- Static pledge amount display -->
                    <label ng-if="pledgingForm.getPledgableAmount() == 0" ng-disabled="true" class="finance__input" form-group="amount">
                        <span class="pledged-amt-static">{{ pledgingForm.currentlyPledgedAmountByUser() }}</span>
                        <span class="finance__subtitle" form-label-valid="amount">Dein Investment</span>
                    </label>

                    <!-- Modifiable pledge amount input -->
                    <label ng-show="pledgingForm.getPledgableAmount() != 0" form-group="amount">
                        <input class="finance__input" type="number" name="amount"
                               ng-model="pledgingForm.pledge.amount"
                               ng-disabled="pledgingForm.getPledgableAmount() == 0"
                               required ng-max="pledgingForm.getPledgableAmount()" ng-pattern="/^[0-9]+$/">

                        <span class="finance__subtitle" form-label-valid="amount">Dein Investment</span>
                        <span class="finance__subtitle" form-label-invalid="amount"
                              ng-messages="pledgingForm.form.amount.$error">
                            <span ng-message="required">Bitte gib deinen gewünschten Finanzierungsbetrag ein</span>
                            <span ng-message="min">Der Finanzierungsbetrag muss größer 0 sein</span>
                            <span ng-message="max">Dein Finanzierungsbetrag ist zu hoch</span>
                            <span ng-message="number">Bitte gib nur Zahlen ein</span>
                            <span ng-message="pattern">Bitte gib nur Zahlen ein</span>
                        </span>
                    </label>
                </li>
                <li class="right  finance__li-important pledgable-amount">
                    {{ pledgingForm.getPledgableAmount() | number }} &euro;
                </li>
            </ul>
        </div>
        <div class="finance__section">
            <ul class="finance__ul">
                <li class="finance__li">
                    <span class="pledged-amount">{{ pledgingForm.getPledgedAmount() | number }}</span> /
                    <span class="pledge-goal">{{ pledgingForm.project.pledgeGoal | number }}</span> &euro;
                    <span class="finance__subtitle">Finanzierung</span>
                </li>
                <li class="finance__li">
                    <span class="budget">{{ pledgingForm.getUserBudget() | number }} &euro;</span>
                    <span class="finance__subtitle">Dein Budget</span>
                </li>
                <li class="finance__li--cta">
                    <button class="finance__btn crwd-success radius shadow"
                            ng-click="pledgingForm.pledgeProject()"
                            ng-disabled="pledgingForm.form.$invalid || pledgingForm.saving || pledgingForm.isZeroPledge() ">
                        {{ pledgingForm.financeButtonLabel() }}
                    </button>
                </li>
            </ul>
        </div>
    </div>
</form>
