let app = document.getElementById("app");

const urlapi = "https://randomuser.me/api/?results=10";

let Titre = m("div.w3-white.cust-div-titre.w3-padding", "Users");

const cardUserCss = "div.w3-panel.w3-card.w3-teal.cust-div-user";
const imgUserCss = "img.cust-img-user";
const spanUserCss = "span.cust-span-user";
const listContainer = "div.cust-div-container";

let User = function () {
  return {
    view: ({ attrs: { user } }) =>
      m(
        cardUserCss,
        m("p", [
          m(imgUserCss, { src: user.picture.medium }),
          m(spanUserCss, user.name.first),
          m(spanUserCss, user.name.last),
        ])
      ),
  };
};

let users = [];
let createListUsers = (user) => m(User, { user });

let App = function () {
  return {
    oninit: m.request({ url: urlapi }).then(function (data) {
      users = data.results;
    }),
    view: () => [
      Titre,
      (users && m(listContainer, users.map(createListUsers))) || "Loading....",
    ],
  };
};
m.mount(app, App);