{% extends "layouts/app.twig" %}

{% block title %}{{ __('Create Host') }}{% endblock %}

{% block content %}
      <div class="page-wrapper">
        <!-- Page header -->
        <div class="page-header d-print-none">
          <div class="container-xl">
            <div class="row g-2 align-items-center">
              <div class="col">
                <!-- Page pre-title -->
                <div class="page-pretitle">
                  {{ __('Overview') }}
                </div>
                <h2 class="page-title">
                  {{ __('Create Host') }}
                </h2>
              </div>
            </div>
          </div>
        </div>
        <!-- Page body -->
        <div class="page-body">
          <div class="container-xl">
            <div class="col-12">
            {% include 'partials/flash.twig' %}
              <div class="card">
                <div class="card-body">
                  <form action="/host/create" method="post">
                  {{ csrf.field | raw }}
                    <div class="form-group">
                        <label for="hostname" class="form-label required">{{ __('Host Name') }}:</label>
                        <input type="text" class="form-control" id="hostname" name="hostname" placeholder="ns1.example.com" required autocapitalize="none">
                    </div>
                    
                    {% if registrars and not registrar %}
                        <div class="form-group mt-3">
                            <label for="registrarDropdown" class="form-label required">{{ __('Select Registrar') }}:</label>
                            <select id="registrarDropdown" name="registrar" class="form-control">
                                {% for registrar in registrars %}
                                    <option value="{{ registrar.id }}">{{ registrar.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    {% endif %}

                    <div class="form-group mt-3">
                        <label for="ipv4" class="form-label">{{ __('IPv4 Address') }} ({{ __('Optional') }}):</label>
                        <input type="text" class="form-control" id="ipv4" name="ipv4" placeholder="192.168.1.1" pattern="^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$">
                        <small class="form-text text-muted">{{ __('Please enter a valid IPv4 address.') }}</small>
                    </div>

                    <div class="form-group mt-3">
                        <label for="ipv6" class="form-label">{{ __('IPv6 Address') }} ({{ __('Optional') }}):</label>
                        <input type="text" class="form-control" id="ipv6" name="ipv6" placeholder="2001:0db8:85a3:0000:0000:8a2e:0370:7334" autocapitalize="none">
                        <small class="form-text text-muted">{{ __('Please enter a valid IPv6 address.') }}</small>
                    </div>
                </div>
                <div class="card-footer">
                  <div class="row align-items-center">
                    <div class="col-auto">
                      <button type="submit" class="btn btn-primary">{{ __('Create Host') }}</button>
                    </div>
                  </div>
                </div>
                </form>
              </div>
            </div>
          </div>
        </div>
        {% include 'partials/footer.twig' %}
      </div>
{% endblock %}