From bd8432e0787e0f0428e04cfdf8e688dd28c614bb Mon Sep 17 00:00:00 2001
From: sanchezvem <mathys.sanchezvende@gmail.com>
Date: Tue, 4 Nov 2025 11:44:42 +0100
Subject: [PATCH] update step 13

---
 first-app/src/app/details/details.html | 29 +++++++++++++++++----
 first-app/src/app/details/details.ts   | 36 ++------------------------
 2 files changed, 26 insertions(+), 39 deletions(-)

diff --git a/first-app/src/app/details/details.html b/first-app/src/app/details/details.html
index 949793c..6b9a056 100644
--- a/first-app/src/app/details/details.html
+++ b/first-app/src/app/details/details.html
@@ -1,13 +1,32 @@
 <article>
-    <img class="listing-photo" [src]="housingLocation?.photo"
-         alt="Exterior photo of {{ housingLocation?.name }}" crossorigin/>
-    <section class="listing-description"><h2 class="listing-heading">{{ housingLocation?.name }}</h2>
-        <p class="listing-location">{{ housingLocation?.city }}, {{ housingLocation?.state }}</p></section>
-    <section class="listing-features"><h2 class="section-heading">About this housing location</h2>
+    <img
+            class="listing-photo"
+            [src]="housingLocation?.photo"
+            alt="Exterior photo of {{ housingLocation?.name }}"
+            crossorigin
+    />
+    <section class="listing-description">
+        <h2 class="listing-heading">{{ housingLocation?.name }}</h2>
+        <p class="listing-location">{{ housingLocation?.city }}, {{ housingLocation?.state }}</p>
+    </section>
+    <section class="listing-features">
+        <h2 class="section-heading">About this housing location</h2>
         <ul>
             <li>Units available: {{ housingLocation?.availableUnits }}</li>
             <li>Does this location have wifi: {{ housingLocation?.wifi }}</li>
             <li>Does this location have laundry: {{ housingLocation?.laundry }}</li>
         </ul>
     </section>
+    <section class="listing-apply">
+        <h2 class="section-heading">Apply now to live here</h2>
+        <form [formGroup]="applyForm" (submit)="submitApplication()">
+            <label for="first-name">First Name</label>
+            <input id="first-name" type="text" formControlName="firstName"/>
+            <label for="last-name">Last Name</label>
+            <input id="last-name" type="text" formControlName="lastName"/>
+            <label for="email">Email</label>
+            <input id="email" type="email" formControlName="email"/>
+            <button type="submit" class="primary">Apply now</button>
+        </form>
+    </section>
 </article>
\ No newline at end of file
diff --git a/first-app/src/app/details/details.ts b/first-app/src/app/details/details.ts
index ec45021..af0ccef 100644
--- a/first-app/src/app/details/details.ts
+++ b/first-app/src/app/details/details.ts
@@ -6,42 +6,10 @@ import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 @Component({
     selector: 'app-details',
     imports: [ReactiveFormsModule],
-    template: `
-        <article>
-            <img
-                class="listing-photo"
-                [src]="housingLocation?.photo"
-                alt="Exterior photo of {{ housingLocation?.name }}"
-                crossorigin
-            />
-            <section class="listing-description">
-                <h2 class="listing-heading">{{ housingLocation?.name }}</h2>
-                <p class="listing-location">{{ housingLocation?.city }}, {{ housingLocation?.state }}</p>
-            </section>
-            <section class="listing-features">
-                <h2 class="section-heading">About this housing location</h2>
-                <ul>
-                    <li>Units available: {{ housingLocation?.availableUnits }}</li>
-                    <li>Does this location have wifi: {{ housingLocation?.wifi }}</li>
-                    <li>Does this location have laundry: {{ housingLocation?.laundry }}</li>
-                </ul>
-            </section>
-            <section class="listing-apply">
-                <h2 class="section-heading">Apply now to live here</h2>
-                <form [formGroup]="applyForm" (submit)="submitApplication()">
-                    <label for="first-name">First Name</label>
-                    <input id="first-name" type="text" formControlName="firstName"/>
-                    <label for="last-name">Last Name</label>
-                    <input id="last-name" type="text" formControlName="lastName"/>
-                    <label for="email">Email</label>
-                    <input id="email" type="email" formControlName="email"/>
-                    <button type="submit" class="primary">Apply now</button>
-                </form>
-            </section>
-        </article>
-    `,
+    templateUrl: 'details.html',
     styleUrls: ['./details.css'],
 })
+
 export class Details {
     route: ActivatedRoute = inject(ActivatedRoute);
     housingService = inject(HousingService);