@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade

<h4>Douglas Adams, the current Content-item</h4>
@Kit.Image.Img(Content.Field("Mugshot"), settings: "Square", width: 100, imgClass: "rounded-circle")
<ol>
  <li>Content item Name:        @Content.FirstName @Content.LastName</li>
  <li>Content item Birthday:    @Content.Birthday.ToString("d")</li>
  <li>Content item Award:       @Content.Awards.Name</li>
  <li>Content item Mugshot URL: @Content.Mugshot</li>
  <li>Content item Mugshot Raw String: @(Content.Get<string>("Mugshot"))</li>
</ol>
<h4>Loop the persons in the Query for this view</h4>
<ul>
  @foreach (var person in AsList(Data)) {
    <li>
      @if (Text.Has(person.Mugshot)) {
        @Kit.Image.Img(Content.Field("Mugshot"), settings: "Square", width: 50, imgClass: "rounded-circle")
      }
      @person.FirstName @person.LastName
    </li>
  }
</ul>

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade

<h4>Douglas Adams on <code>Content</code></h4>
<p>
  Note: The Biography contains a LOT of HTML...
</p>
@{
  // scrubHtml will clean up Html tags; there are more options
  var bio = Kit.Scrub.All(Content.Biography);

  // Text.Ellipsis uses RazorBlade
  var teaser = Text.Ellipsis(bio, 100);
}
<p>
  <strong>Teaser</strong> (using .Raw() for Umlauts): <br>
  <em>@Html.Raw(teaser)</em>
</p>
<hr>
<div>
  <strong>Now as rich HTML</strong> <br>
  (drag size to see responsiv behavior) <br>
  @Html.Raw(Content.Biography)
</div>

@inherits Custom.Hybrid.Razor14

<h4>A Person on <code>Content</code></h4>
@{
  var itemPres = Content.Presentation;
}

<p>
  Note that the following should be @itemPres.Color (probably green)
</p>
<p style='color: @itemPres.Color'>
  @Content.Title
</p>

@inherits Custom.Hybrid.Razor14

</hide-silent>
<h4>Use <code>.Awards</code> to get one</h4>
<ol>
  <li>Award ID:          @Content.Awards.Id</li>
  <li>Award Name:        @Content.Awards.Name</li>
  <li>Award Name (Path): @Content.Awards.Name</li>
</ol>



<h4>Use <code>.Awards</code> to get all</h4>
<span>Award Count:       @Content.Awards.Count</span>
<ol>
  @foreach (var award in AsList(Content.Awards as object)) {
    <li>Award: @award.Name</li>
  }
</ol>

@inherits Custom.Hybrid.Razor14

<h4>Douglas Adams, the current item (MyItem)</h4>
<p>Use <code>.Url(…)</code> to resolve file references such as <code>file:72</code></p>
<ol>
  <li>Mugshot field Value:  @Content.Mugshot</li>
  <li>Mugshot URL:          @Content.Mugshot</li>
  <li>
    Mugshot Picture <br>
    @Kit.Image.Picture(Content.Mugshot, settings: "Square", width: 100, imgClass: "rounded-circle")
  </li>
</ol>

@inherits Custom.Hybrid.Razor14
@using System.Linq

<h4>Douglas Adams, the current item (Content)</h4>
@{
  var folder = AsAdam(Content, "Mugshot") as ToSic.Sxc.Adam.IFolder;
  var file = folder.Files.First();
  var sizeInfo = file.SizeInfo;
}
<ol>
  <li>File name:        @file.Name</li>
  <li>File extension:   @file.Extension</li>
  <li>Size (bytes):     @file.Size</li>
  <li>SizeInfo:         @sizeInfo.BestSize.ToString("#.#") @sizeInfo.BestUnit</li>
</ol>

<p>Every file-field is actually a folder...</p>

<ol>
  <li>Files count:    @folder.Files.Count()</li>
  <li>Sub-Folders:    @folder.Folders.Count()</li>
</ol>
<p>
  ...which could hold many files. 
  If you want to show them, you need <code>Kit.Image...</code></p>
<ol>
  @foreach (var f in folder.Files) {
    <li>@f.Name <br> @Kit.Image.Picture(f, width: 100)</li>
  }
</ol>

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade

@functions {
  // quick helper to make the output nicer
  string Boolmoji(bool value) { return value ? "✅" : "🔲"; }
}
@{
  var keys = new [] { "LastName", "IsAlive", "Haters", "Birthday",
    "FirstName", "Awards", "Sex", "Mugshot", "Biography" };
}
<h4>Inspect the fields of an Item</h4>
<ol>
  @foreach (var key in keys) {
    var value = Content.Get(key);
    <li>
      @Boolmoji(value != null || (value is string && Text.Has(value)))
      @key:
      @value
    </li>
  }
</ol>

<h4>Let's do some manual inspection</h4>
<ol>
  <li>@Boolmoji(Text.Has(Content.Firstname)) "FirstName" exits and not empty?</li>
  <li>@Boolmoji(Text.Has(Content.hello)) "FirstName" exits and not empty?</li>
</ol>

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade

<h4>Loop persons which were added to this view</h4>
<ul>
@foreach (var person in AsList(Data)) {
  <li>
    @if (Text.Has(person.Mugshot)) {
      @Kit.Image.Img(person.Field("Mugshot"), settings: "Square", width: 50, imgClass: "rounded-circle")
    }
    @person.FirstName @person.LastName
  </li>
}
</ul>

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade


<ul>
  @foreach (var item in AsList(Data)) {
    var pres = item.Presentation;
    
    var hType = pres.HeadingType;
    var title = item.Title + (pres.Highlight == true ? " 🌟" : "");
    <li>
      Create a heading tag the size specified in Presentation
      @if (Text.Has(hType)) {
        @Kit.HtmlTags.Custom(hType).Wrap(title)
      } else {
        @title
      }
      <br>
      <em>FYI: Heading @(Text.Has(hType) ? "none" : hType)</em>
      <div style='color: @pres.Color'>
        @item.Html("Contents")
      </div>
    </li>
  }
</ul>

@inherits Custom.Hybrid.Razor14

<h3>@Header.Title</h3>
<ul>
  @foreach (var item in AsList(Data)) {
    <li>
      @item.EntityTitle
    </li>
  }
</ul>

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade

<ul>
  @foreach (var person in AsList(Data)) {
    <li>
      @if (Text.Has(person.Mugshot)) {
        <img loading="lazy" src="@person.Mugshot?w=50&h=50&mode=crop" width="50px" style="border-radius: 50%">
      }
      @person.FirstName @person.LastName
      @if (person.Awards.Count > 0 ) {
        // we just want the award names
        // to understand this, look at the LINQ tutorial
        var awardNames = AsList(person.Awards as object).Select(a => a.Name);
        <span>
          (awards: @string.Join(",", awardNames))
        </span>
      }
    </li>
  }
</ul>