@extends('layout.rs.html')

@section('header', self.get_header("hello"))

@section('title','Home Page')

@section footer {
  <p>Footer content goes here.</p>
  what is going on dude @self.hey
  <p>Footer content goes here.</p>

  <div>
    @if self.my_var == "my var" {
      <p>MyVar is true</p>
    } else {
      <p>MyVar is false</p>
    }
  </div>
}

<div>
  @for user in &self.users {
    <p>@user.name</p>
  }
</div>

@use "Card.rs.html" as Card

@* merhaba comment *@

@{

  let x = 5;
  let y = 10;
  println!("{}", x + y);

  fn inline_function() -> String {
    "inline function".to_string()
  }
}

@time("2023-1:30:00Z")
@time("2023-11-20T10:30:00Z").pretty()
@time("2023-11-20T10:30:00Z").pretty().format("%b %d, %Y")
@time("2023-11-20T10:30:00Z").date()
@time("2023-11-20T10:30:00Z").time()

@inline_function()

<script type="text/javascript">
  let users = @json(&self.users);
  @json_let("users_let", &self.users);
</script>

@self.title
@(3+5)
@("Hello, world! <script>alert('hello')</script>")


@raw {
  @if (x > 5) { print("hey"); }

  <h2>{{ message }}</h2>
  <p>Count value: {{ count }}</p>

  {{-- Buttons and event listeners --}}
  <button v-on:click="increment">Inc (+)</button>
  <button @click="decrement">Dec (-)</button>
}

@if self.title == "Hello" {
  <p>myvar is true</p>
} else {
  <p>myvar is false</p>
}

<Card title=@x footer=false prop3="hey" prop4={<p>what is this</p>}>
  <p>hello</p>
  <p>world</p>
  @if true {
    <p>say something</p>
  }

</Card>

@match self.card_count {
  0 => <div>i</div>,
  1 => {
    <div>hell @self.card_count looo</div>
    <p>hello world</p>

    @if self.card_count > 0 {
      <p>Count is greater than 0</p>
    } else {
      <p>Count is not greater than 0</p>
    }
  },
  2 => <p>hel,_..loo</p>,
  _ => <p>aa=>,{..a</p>,
}

@for user in &self.users {
  <p>User @user.name</p>
  <p>User @user.age</p>
  <br/>
}

<div>
  <h1>Home Page</h1>
  <p>Welcome to the home page.</p>
  <hr>

</div>