<turbo-stream action="prepend" target="modals">
  <template><div
  class="modal fade"
  id="customer_signup_modal"
  data-modals-target="modal"
  tabindex="-1"
  aria-labelledby="customer_signup_modalLabel"
  aria-modal="true"
>
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
    <div class="modal-content">
      <div class="modal-header"><h1 class="modal-title fs-5" id="customer_signup_modalLabel">Konto anlegen</h1><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
      </div>
      <div class="modal-body"><form
  id="registration-form-container"
  method="post"action="/customer.turbo_stream"
  novalidate
  data-controller="form"
  data-action="submit->form#validate"
>
  <input type="hidden" name="_method" value="post" autocomplete="off">
  <input type="hidden" name="authenticity_token" value="ftPjpycl7f23K9VECai8i_JmcUu2p9W_Pg_NB0kSK6OlKWjJjD-ozxEvmz-9_yLryGlrkBTdjVU75i81LTQuEw" autocomplete="off"><input type="hidden" name="modal_id" value="customer_signup_modal" autocomplete="off"><div id="additional_invalid_feedback"></div>

  <div class="d-flex flex-column gap-4">
    <div id="country_input"><div class="form-floating">
  <select
    value="DE"
    id="country"
    name="customer[address][country]"
    class="form-select scroll-m-5"
    aria-label="Land/Region"
    aria-describedby="country_feedback"
    required
    autocomplete=" country"><option
      value=""
      disabled>Bitte wählen</option><option
        value="DE"selected="true">Deutschland</option><option
        value="AT">Österreich</option><option
        value="CH">Schweiz</option><option
        value="BE">Belgien</option><option
        value="BG">Bulgarien</option><option
        value="DK">Dänemark</option><option
        value="EE">Estland</option><option
        value="FI">Finnland</option><option
        value="FR">Frankreich</option><option
        value="HR">Kroatien</option><option
        value="IT">Italien</option><option
        value="IE">Irland</option><option
        value="LV">Lettland</option><option
        value="LT">Litauen</option><option
        value="LU">Luxemburg</option><option
        value="MT">Malta</option><option
        value="NL">Niederlande</option><option
        value="PL">Polen</option><option
        value="PT">Portugal</option><option
        value="RO">Rumänien</option><option
        value="SE">Schweden</option><option
        value="SK">Slowakei</option><option
        value="SI">Slowenien</option><option
        value="ES">Spanien</option><option
        value="CZ">Tschechische Republik</option><option
        value="HU">Ungarn</option><option
        value="CY">Zypern</option></select>
  <label for="country">Land/Region</label>
  <div id="country_feedback" class="invalid-feedback">Kein Land</div>
</div>
</div>
    <div id="email_input"><div class="form-floating">
  <input
    type="email"
    value=""
    class="form-control scroll-m-5"
    id="email"
    aria-describedby="email_feedback"
    name="customer[email]"
    placeholder="E-Mail"
    pattern="[^@\s]+@[^@\s]+\.[^@\s]+"required="true"autocomplete=" email"
  >
  <label for="email" class="text-muted">E-Mail</label>
  <div id="email_feedback" class="invalid-feedback">Ungültiges E-Mail-Format</div>
</div>
</div>
    <div id="password_input"><div class="form-floating">
  <input
    type="password"
    class="form-control scroll-m-5"
    id="password"
    aria-describedby="password_feedback"
    name="customer[password]"
    placeholder="Passwort"required="true">
  <label for="password" class="text-muted">Passwort</label>
  <div id="password_feedback" class="invalid-feedback">Kein Passwort</div>
  <div class="invalid-feedback text-muted">Mindestens fünf Zeichen</div>
</div>
</div>
    <div id="password_confirmation_input"><div class="form-floating">
  <input
    type="password"
    class="form-control scroll-m-5"
    id="password_confirmation"
    aria-describedby="password_feedback"
    name="customer[password_confirmation]"
    placeholder="Passwort wiederholen"required="true">
  <label for="password_confirmation" class="text-muted">Passwort wiederholen</label>
  <div id="password_feedback" class="invalid-feedback">Kein Passwort</div>
  <div class="invalid-feedback text-muted">Mindestens fünf Zeichen</div>
</div>
</div>
    <div class="d-flex gap-4">
      <div id="firstname_input" class="flex-fill"><div class="form-floating">
  <input
    type="text"
    value=""
    class="form-control scroll-m-5"
    id="firstname"
    aria-describedby="firstname_feedback"
    name="customer[address][firstname]"
    placeholder="Vorname"required="true"autocomplete=" given-name"
  >
  <label for="firstname" class="text-muted">Vorname</label>
  <div id="firstname_feedback" class="invalid-feedback">Kein Vorname</div>
</div>
</div>
      <div id="lastname_input" class="flex-fill"><div class="form-floating">
  <input
    type="text"
    value=""
    class="form-control scroll-m-5"
    id="lastname"
    aria-describedby="lastname_feedback"
    name="customer[address][lastname]"
    placeholder="Nachname"required="true"autocomplete=" family-name"
  >
  <label for="lastname" class="text-muted">Nachname</label>
  <div id="lastname_feedback" class="invalid-feedback">Kein Nachname</div>
</div>
</div>
    </div>
    <div id="companyname_input"><div class="form-floating">
  <input
    type="text"
    value=""
    class="form-control scroll-m-5"
    id="companyname"name="customer[address][companyname]"
    placeholder="Unternehmen (optional)"autocomplete=" organization"
  >
  <label for="companyname" class="text-muted">Unternehmen (optional)</label></div>
</div>
    <div id="street_input"><div class="form-floating">
  <input
    type="text"
    value=""
    class="form-control scroll-m-5"
    id="street"
    aria-describedby="street_feedback"
    name="customer[address][street]"
    placeholder="Straße und Hausnummer"required="true"pattern=".*[0-9].*"
    autocomplete=" street-address"
  >
  <label for="street" class="text-muted">Straße und Hausnummer</label>
  <div id="street_feedback" class="invalid-feedback">Keine Straße</div>
  <div class="invalid-feedback text-muted">Beispiel: 'Musterstraße 12'</div>
</div>
</div>
    <div id="address_addition_input"><div class="form-floating">
  <input
    type="text"
    value=""
    class="form-control scroll-m-5"
    id="address_addition"name="customer[address][address_addition]"
    placeholder="Wohnung, Stockwerk, etc. (optional)"autocomplete=" address-line3"
  >
  <label for="address_addition" class="text-muted">Wohnung, Stockwerk, etc. (optional)</label><div id="address_addition_help" class="form-text">Beispiel: '3.OG links'</div>
</div>
</div>
    <div class="d-flex gap-4">
      <div id="zip_code_input" class="flex-fill"><div class="form-floating">
  <input
    type="text"
    value=""
    class="form-control scroll-m-5"
    id="zip_code"
    aria-describedby="zip_code_feedback"
    name="customer[address][zip_code]"
    placeholder="PLZ"required="true"autocomplete=" postal-code"
  >
  <label for="zip_code" class="text-muted">PLZ</label>
  <div id="zip_code_feedback" class="invalid-feedback">Keine Postleitzahl (PLZ)</div>
</div>
</div>
      <div id="city_input" class="flex-fill"><div class="form-floating">
  <input
    type="text"
    value=""
    class="form-control scroll-m-5"
    id="city"
    aria-describedby="city_feedback"
    name="customer[address][city]"
    placeholder="Stadt"required="true"autocomplete=" address-level2"
  >
  <label for="city" class="text-muted">Stadt</label>
  <div id="city_feedback" class="invalid-feedback">Keine Stadt</div>
</div>
</div>
    </div>
    <div id="phone_input"><div class="form-floating">
  <input
    type="tel"
    value=""
    class="form-control scroll-m-5"
    id="phone"
    aria-describedby="phone_feedback"
    name="customer[address][phone]"
    placeholder="Telefonnummer (optional)"autocomplete=" tel"
  >
  <label for="phone" class="text-muted">Telefonnummer (optional)</label>
  <div id="phone_feedback" class="invalid-feedback">Falls wir Sie in Bezug auf Ihre Bestellung kontaktieren müssen</div>
  <div class="invalid-feedback text-muted">Beispiel: '0169 2347890'</div>
  <div id="phone_help" class="form-text">Falls wir Sie in Bezug auf Ihre Bestellung kontaktieren müssen</div>
</div>
</div>
  </div>

  <button class="btn btn-lg btn-primary mt-4 px-5 w-100" type="submit">
    <span>
      <span class="show-when-enabled">Absenden</span>
      <span class="show-when-disabled"><i class="fas fa-spinner fa-fw ms-2 fa-spin"></i></span>
    </span>
  </button><div class="mt-3 d-flex flex-column gap-2">
    <a
      href="/customer/login.turbo_stream"
      data-turbo-stream
      data-turbo-frame="_top"
      class="link-primary fw-bold text-center"
    >Bereits ein Konto? Jetzt anmelden</a>
  </div>
</form>
</div></div>
  </div>
</div>
</template>
</turbo-stream>
