lmnp-organizer/frontend/src/app/components/apartment-legal-profile-form/apartment-legal-profile-form.html

<section class="form-section" aria-labelledby="legal-heading">
  <div class="section-heading">
    <h2 id="legal-heading">Identification juridique</h2>
    <p>Ces champs facultatifs seront réutilisés dans les baux.</p>
  </div>
  <div class="form-grid">
    <mat-form-field appearance="outline"
      ><mat-label>Identifiant fiscal du logement</mat-label
      ><input
        matInput
        type="text"
        id="taxIdentifier"
        [formField]="legalProfileForm().taxIdentifier"
    /></mat-form-field>
    <mat-form-field appearance="outline"
      ><mat-label>Département</mat-label
      ><input
        matInput
        type="text"
        id="departmentCode"
        [formField]="legalProfileForm().departmentCode"
        placeholder="75, 2A, 971…"
    /></mat-form-field>
    <mat-form-field appearance="outline"
      ><mat-label>Type de bâtiment</mat-label
      ><mat-select id="buildingType" [formField]="legalProfileForm().buildingType">
        <mat-option [value]="null">Non renseigné</mat-option>
        <mat-option value="APARTMENT_BUILDING">Immeuble collectif</mat-option>
        <mat-option value="INDIVIDUAL_HOUSE">Maison individuelle</mat-option>
      </mat-select></mat-form-field
    >
    <mat-form-field appearance="outline"
      ><mat-label>Période de construction</mat-label
      ><mat-select id="constructionPeriod" [formField]="legalProfileForm().constructionPeriod">
        <mat-option [value]="null">Non renseignée</mat-option>
        <mat-option value="BEFORE_1949">Avant 1949</mat-option>
        <mat-option value="1949_1974">De 1949 à 1974</mat-option>
        <mat-option value="1975_1989">De 1975 à 1989</mat-option>
        <mat-option value="1990_2005">De 1990 à 2005</mat-option>
        <mat-option value="2006_2012">De 2006 à 2012</mat-option>
        <mat-option value="AFTER_2012">Après 2012</mat-option>
      </mat-select></mat-form-field
    >
    <mat-form-field appearance="outline" class="full-field"
      ><mat-label>Régime juridique de l'immeuble</mat-label
      ><input
        matInput
        type="text"
        id="ownershipRegime"
        [formField]="legalProfileForm().ownershipRegime"
        placeholder="Copropriété, monopropriété…"
    /></mat-form-field>
  </div>
</section>

<section class="form-section" aria-labelledby="characteristics-heading">
  <div class="section-heading">
    <h2 id="characteristics-heading">Caractéristiques du logement</h2>
    <p>Surface, usage et performance énergétique.</p>
  </div>
  <div class="form-grid">
    <mat-form-field appearance="outline"
      ><mat-label>Surface habitable</mat-label
      ><input
        matInput
        type="number"
        id="habitableSurface"
        [formField]="legalProfileForm().habitableSurface"
      /><span matTextSuffix>m²</span></mat-form-field
    >
    <mat-form-field appearance="outline"
      ><mat-label>Nombre de pièces principales</mat-label
      ><input
        matInput
        type="number"
        step="1"
        id="roomCount"
        [formField]="legalProfileForm().roomCount"
    /></mat-form-field>
    <mat-form-field appearance="outline"
      ><mat-label>Classe énergétique</mat-label
      ><mat-select id="energyRating" [formField]="legalProfileForm().energyRating">
        <mat-option [value]="null">Non renseignée</mat-option>
        @for (rating of energyRatings; track rating) {
          <mat-option [value]="rating">{{ rating }}</mat-option>
        }
      </mat-select></mat-form-field
    >
    <mat-form-field appearance="outline"
      ><mat-label>Coût annuel énergétique estimé</mat-label
      ><input
        matInput
        type="number"
        id="estimatedAnnualEnergyCost"
        [formField]="legalProfileForm().estimatedAnnualEnergyCost"
      /><span matTextSuffix>€</span></mat-form-field
    >
    <mat-form-field appearance="outline"
      ><mat-label>Année de référence du coût énergétique</mat-label
      ><input
        matInput
        type="number"
        id="estimatedAnnualEnergyCostReferenceYear"
        [formField]="legalProfileForm().estimatedAnnualEnergyCostReferenceYear"
        placeholder="2021"
    /></mat-form-field>
    <mat-form-field appearance="outline" class="full-field"
      ><mat-label>Destination des locaux</mat-label
      ><input
        matInput
        type="text"
        id="destination"
        [formField]="legalProfileForm().destination"
        placeholder="Usage d'habitation"
    /></mat-form-field>
    <mat-form-field appearance="outline" class="full-field"
      ><mat-label>Autres parties privatives</mat-label
      ><textarea
        matInput
        id="otherPrivateAreas"
        [formField]="legalProfileForm().otherPrivateAreas"
        rows="2"
        placeholder="Balcon, terrasse, jardin…"
      ></textarea>
    </mat-form-field>
  </div>
</section>

<section class="form-section" aria-labelledby="equipment-heading">
  <div class="section-heading">
    <h2 id="equipment-heading">Équipements et accès</h2>
    <p>Décrivez librement les installations disponibles.</p>
  </div>
  <div class="form-grid">
    <mat-form-field appearance="outline" class="full-field"
      ><mat-label>Équipements du logement</mat-label
      ><textarea
        matInput
        id="equipment"
        [formField]="legalProfileForm().equipment"
        rows="2"
      ></textarea>
    </mat-form-field>
    <mat-form-field appearance="outline"
      ><mat-label>Chauffage</mat-label
      ><input matInput type="text" id="heating" [formField]="legalProfileForm().heating"
    /></mat-form-field>
    <mat-form-field appearance="outline"
      ><mat-label>Eau chaude</mat-label
      ><input matInput type="text" id="hotWater" [formField]="legalProfileForm().hotWater"
    /></mat-form-field>
    <mat-form-field appearance="outline" class="full-field"
      ><mat-label>Accessoires privatifs</mat-label
      ><input
        matInput
        type="text"
        id="privateAccessories"
        [formField]="legalProfileForm().privateAccessories"
        placeholder="Cave, parking, garage…"
    /></mat-form-field>
    <mat-form-field appearance="outline" class="full-field"
      ><mat-label>Parties et équipements communs</mat-label
      ><textarea
        matInput
        id="commonAreas"
        [formField]="legalProfileForm().commonAreas"
        rows="2"
      ></textarea>
    </mat-form-field>
    <mat-form-field appearance="outline" class="full-field"
      ><mat-label>Accès internet et communications</mat-label
      ><input
        matInput
        type="text"
        id="internetAccess"
        [formField]="legalProfileForm().internetAccess"
        placeholder="Fibre, câble, antenne…"
    /></mat-form-field>
  </div>
</section>